Mengganti tanggal postingan menjadi icon calender

Sepertinya ini baru bagi saya, namun bila ada yang sudah tahu dahulu sebelumnya ya jangan terlalu mengabaikan postinganku ini :D

untuk mengganti atau merubah tanggal terbit postingan menjadi ikon kalender tidak begitu sulit, namun sebenarnya ini juga agak rumit. Tapi seberapa susah sih bagi teman teman yang sudah pada master :D

oiyaa, buruan saja deh ke tutorial cara mengganti icon Calender di tanggal postingan saya jelaskan sedikit :
Simak dengan benar benar ya,

• Yang pertama kita lakukan adalah mengganti format tanggal terbit postingan dengan seperti ini (mm.dd.yyy). trobos saja caranya begini 

Login ke blogger >> Setting >> Formating >> ganti "Date header Format" / format penganggalan menjadi (mm.dd.yyy)

• Langkah kedua adalah menyeting HTML Template blog

Edit Template >> Expand Widget templates

1. Cari kode berikut ini ya <TITLE><data:blog.pageTitle/></TITLE> , kalo dah ketemu pasang kode dibawah ini dibawahnya kode tadi.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.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> 

2. langsung cari kode ini juga

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

Kalo gak ketemu cari kode ini :

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

3. jika kode di no.2 dah ketemu pasang kode dibawah ini di bawahnya kode no.2

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/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;

} 

Note : kode http://img600.imageshack.us/img600/3576/bluecalend.gif adalah alamat gambar icon tanngalnya, bisa dirubah kok.
Saya bagikan sedikit contohnya :

• http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif
• http://img805.imageshack.us/img805/9918/blue2calend.gif
• http://img600.imageshack.us/img600/3576/bluecalend.gif
• http://img837.imageshack.us/img837/4311/greencalend.gif
• http://img137.imageshack.us/img137/3329/orangecalend.gif
• http://img196.imageshack.us/img196/8339/pinkcalend.gif
• http://img818.imageshack.us/img818/1760/yellowcalend.gif

4. langkah selanjutnya kamu cari kode yang seerti ini di templates blog nya <data:post.dateHeader/> .
kalo udah ketemu tinggal hapus kode tadi dan diganti dengan yang dibawah ini:

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

5. Simpan dulu template nya untuk cek silahkan dicoba udah jadi apa belum,
Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {