Mengganti tanggal posting dengan icon kalender

Hampir 1 bulan aku berusaha mencari turorial tentang Mengganti tanggal posting dengan icon kalender, semua tutorial yang aku praktekkan ternyata hasilnya NIHIL. Mungkin karena aku bodoh ya??

Karena tak ada sesuatu yang tidak mungkin akhirnya aku berhasil juga. OK deh tidak usah panjang lebar ceritanya. Caranya ternyata super mudah. Ikuti tutorial di bawah ini.

1. Biasa, login ke blog, pilih ke rancangan, edit html, jangan lupa centang expand widget. Kemudin cari kode ]]></b:skin>. Untuk mempermudah pencarian gunakan ctrl+F. setelah ketemu copy kode berikut dan letakkan di bawah ]]></b:skin>

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

3. dan copy lagi kode berikut dan letakkan di atas ]]></b:skin>

4. h2.date-header{
         margin:1.5em .5em 0.5em;
   }
   .kalender{
         background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/bgGreenCalendarAnima.gif) no-repeat;
         width:44px;
         margin:20px 10px 0 8px;
         float:left;
         font-weight:bold;
         height:52px;
         text-align:center;
         border:1px solid #777;
         border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
         opacity:0.8;
        -o-transition:all ease-in 1s;
        -moz-transition:all ease-in 1s;
        -webkit-transition:all ease-in 1s;
         filter:alpha(opacity=80);
         padding:1px;
   }
   .kalender:hover{
         filter:alpha(opacity=100);
         opacity:1.0;
         border-color:red;
   }
   .month{
         font-size:10px;
         width:33px;
         margin:3px 2px 0 6px;
         text-transform:uppercase; 
         color:#4d010a;
         padding: 2px 0px 0px 0px;
   }
   .day{
         color:#555;
         font-size:27px;
         width:44px;
         margin:0;padding:0;
   }

5. Selanjutnya adalah cari kode <data:post.dateHeader/> dan ganti dengan

6. <div class='kalender'>
   <script type='text/javascript'>
   date_replace(&#39;<data:post.dateHeader/>&#39;);
   </script>
   </div>

7. Simpan templates. Dan langkah terakhir adalah akukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 12.22.2010).
   
   • KLIK "SETTINGS" (Pengaturan).
   • KLIK "FORMAT".
   • Lihat "Format Header Tanggal".
   • Rubah format tanggal sesuai contoh di atas.
   • KLIK "SAVE (Simpan).
   • Buka blog dan lihat hasilnya!
   
   
   Mudah bukan???