Mengganti Tanggal Postingan Dengan Icon Kalender

Original by IFX Adrian | 26 November 2009 2 Comments

Setelah bertahun-tahun, bahkan berabad-abad melakukan penelitian di berbagai benua (lebai banget nih.. :$), akhirnya saya menemukan cara untuk mengganti tanggal postingan dengan icon kalender. Hmm.. Menarik juga nih Tapi apa fungsinya? Fungsinya ya supaya blog anda lebih ekspresif dan menarik tampilannya (huft, dodol banget sih, gitu aja nanya! :O ). Mau tau gimana caranya?

Berikut Cara Mengganti Tanggal Postingan Dengan Icon Kalender

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates. Jangan lupa backup dulu template anda. Bagi yang belum tahu cara backup template, klik disini.

3. Cari kode <title><data:blog.pageTitle/></title>, jika sudah paste kode berikut tepat dibawahnya:

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://tips-blogger-zacky.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

4. Cari kode dibawah ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Atau

h2.date-header {
margin:1.5em 0 .5em;
}

5. Jika sudah, paste kode berikut tepat di bawahnya:

.dateblock {
background: url("http://tipsbloggerzacky.googlecode.com/files/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://tipsbloggerzacky.googlecode.com/files/bluecalend.gif adalah url icon kalender. Anda bisa menggantinya sesuai keinginan.

Berikut icon calendar lain yang bisa anda gunakan:

Kode #3366CC adalah kode warna tanggal. Anda bisa menggantinya sesuai keinginan. Klik disini untuk melihat kode warna html.

6. Selanjutnya, cari kode <data:post.dateHeader/>, ganti kode tersebut dengan kode di bawah ini:

<div class='dateblock'>
<script>date_replace('<data:post.dateHeader/>');</script></div>

7. Terakhir, klik Save Template.

NB: JIka tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode padding: 4px 0px 0px 0px; dibawah kode .month { dan dibawah kode .day {.

Gimana? Pusing? Minum Bodrex..!!! Hehehe…

Selamat mencoba…

Jangan lupa kasih komentar ya…

Technorati token code: NDV3WYGM3DPB