Mengganti tanggal pada post dengan icon calender

Artikle kali ini saya kutip langsung dari mas kendhin dan saya sangat berterima kasih telah shared ilmunya dari pada ngomong panjang lebar, langsung aja :
sudah pasti harus login terlebih dahulu
sebelum masuk ke pengeditan anda harus mengganti setting tanggal terlebih dahulu cararanya anda harus masuk ke pengaturan >> format, ganti "date header format" atau format tanggal menjadi (mm.dd.yyyy) maksudnya (bulan.tanggal.tahun) ganti tanggal kira-kira seperti contoh berikut: 3.17.2009 terus simpan.

barulah anda mulai pengeidtannya
1. masuk ke tata letak (layout) >> Edit html
saya saran kan sebelum anda melakukan pengeditan sebaiknya anda membackup terlebih dahulu template anda
2. beri tanda centang pada Expand Template Widget
cari code berikut <title><data:blog.pageTitle/></title> kalau udah ketemu copas code berikut dan letakkan di bawahnya



<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>



3. nah kalau sudah cari code berikut:


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


kalau g' da coba cari yang ini

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

4. kalau sudah ketemu taruh code berikut dibawahnya

.dateblock {
background: url("http://dhedyfaste.xp3.biz/blog/calander/calender-ijo.jpg")
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;

}


ext yang berwarna merah itu adalah icon kalender, anda bisa menggantinya dengan gambar-gambar dibawah ini, caranya ganti text yang berwarna merah dengan code gambar berikut ini, misalnya kamu pingin kelender yang berwarna hijau,
caranya anda ganti calender-ijo.jpg
dengan greencalend.gif



calender-hitam.jpg calender-cyan.jpg calender-pink.jpg

calender-ungu.jpg calender-kuning.jpg calender-merah.jpg

calender-orange.jpg calender-ijo.jpg

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini
, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.