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;

}

text 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 <data:post.dateHeader/>
, 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.

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

5. Simpan Template anda dan lihat hasilnya. Berhasil nggak ya? :t

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 {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D

Selamat mencobaaaaaaaaaa!!!!!!!........