Cara Mengganti Header Tanggal menjadi Icon Kalender

Kali ini saya mau bagi-bagi tips blogger buat sobat sekalian.. tips saya kali ini cara mengganti header tanggal menjadi icon kalender,.. mungkin bagi sobat yang sudah mahir, tips saya ini tiada artinya.. tapi saya hanya ingin share pengetahuan saja.. langsung aja CEKIDOT..

Untuk mengganti header tanggal menjadi icon kalender.. berikut langkah-langkahnya..
1. Login/Masuk ke Blogger.
2. Pilih menu Desain/Rancangan.
3. Pilih menu Setelan -->  Bahasa dan Pemformatan
4. Ganti format Header Tanggal menjadi (mm.dd.yyyy) setelah itu klik simpan setelan.
5. Pilih menu Template -- > Edit HTML.
6. Centang tulisan "Expand Template Widget".
7. Cari Kode <title><data:blog.pageTitle/></title> . setelah menemukan kode tersebut, copy kode berkut tepat di bawah kode tersebut.

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

8. Setelah itu, cari kode

 h2.date-header {

9. copy kode di bawah ini di antara kode  h2.date-header dan  { .

.dateblock {
background: url("http://img837.imageshack.us/img837/9199/redcalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
 padding: 4px 0px 0px 0px;
font-size: 12px;
width: 37px;
margin: 0 2px;
text-transform: uppercase;
color: #fff;
}

.day {
 padding: 4px 0px 0px 0px;
color:#000000;
font-size: 19px;
width: 37px;
margin: 0 2px;

}

10. warna kalender bisa diganti sesuai keinginan. cari kode =  background: url("http://img837.imageshack.us/img837/9199/redcalend.gif") gantilah url yang berwarna biru dengan url gambar yang anda inginkan.

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif

http://img837.imageshack.us/img837/4311/greencalend.gif

http://img837.imageshack.us/img837/9199/redcalend.gif

http://img805.imageshack.us/img805/9918/blue2calend.gif

http://img137.imageshack.us/img137/3329/orangecalend.gif

http://img220.imageshack.us/img220/3262/ungucalend.gif

http://img600.imageshack.us/img600/3576/bluecalend.gif

http://img196.imageshack.us/img196/8339/pinkcalend.gif

http://img818.imageshack.us/img818/1760/yellowcalend.gif

11. Setelah itu , cari kode <data:post.dateHeader/> . agar mudah mencarinya, tekan Ctrl + F dan pastekan ke kotak tersebut. setelah ketemu, ganti kode tersebut dengan kode di bawah ini 

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

12. Simpan template dan lihat hasilnya... :)

SEMOGA BERMANFAAT YA SOBAT BLOGGER...