Mengganti Tanggal dengan Icon Kalender

Haloo semua....Selamat pagi. Aku punya hacking blog yang baru nih....walaupun aku baru tahu, padahal orang lain sudah tahu dari dulu . Nah...untuk blog hack yang ini saya akan kasih tau bagaimana Mengganti Tanggal dengan Icon Kalender. Pengen tahu contohnya...? Lihat aja nih di blognya mr. robbex. Dah liat...? Pengen tau caranya...?Ok deh langsung aja ya......

1. Setelah login di blogger, dan sebelum edit HTML anda, pastikan dulu format tanggal blog anda harus mm/dd/yyyy. Kalo belum, silahkan ganti dulu. Caranya...setting--->>formatting trus ganti date header format-nya dengan mm/dd/yyyy. kalo ga tau formatnya seperti ini : 1.25.2008.
2. Nah..langkah ke-2 yaitu edit HTML. caranya masuk ke layout--->>edit HTML jangan lupa kasih tanda centang di Expand Template Widget.
3. Kalo udah, Silahkan cari kode HTML di bawah ini :

   <TITLE><data:blog.pageTitle/></TITLE>

4. Kalo sudah ketemu, copy paste script berikut dibawah kode HTML yang tadi :

   <SCRIPT type='text/javascript'> //<![CDATA[ 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>

5. Kalo udah, cari kode berikut :

   h2.date-header { background:none; margin:1.5em 0 .5em; border:0px; font-size:80%; color:#b33c3c; font-style:normal; }

6. Kalo dah ketemu, copy kode berikut di bawah kode diatas :

   .dateblock { background: url("http://mizwar.blog.googlepages.com/biru.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: 34px; margin-top:4px; margin-bottom:3px; margin-left:5px; margin-right:5px; text-transform: uppercase; color: #fff; } .day { color:#3366CC; font-size: 19px; width: 37px; margin: 0 5px; }

   Keterangan: Kode http://mizwar.blog.googlepages.com/biru.gif adalah gambar kalender. Kalo anda ingin mengganti gambar kalender tersebut, silahkan ganti text biru.gif dengan text kalender di bawah ini :

   Blue.gif	cyan.gif	hijau.gif
   orange.gif	pink.gif	ungu.gif
   hitam.gif	kuning.gif	merah.gif

   Untuk mengganti warna text bulan, silahkan ganti kode heksa warna #fff dengan warna sesukakamu. Begitu juga jika ingin mengganti warna text tanggal, silahkan ganti kode heksa #3366cc dengan kode warna sesukamu. Apabila letak text bulan tidak sesuai dengan kalender, silahkan ubah kembali marginnya dengan disesuaikan.
7. Kalo udah selesai, kemudian cari kode html berikut :

   <data:post.dateHeader/>

   Lalu ganti dengan script ini :

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

8. Save Template dan Selesai