Merubah Tanggal Postingan dengan icon kalender

Tutorial kali ini merupakan tutorial yang telah kami terapkan diblog ini beberapa saat yang lalu dan hasilnya seperti apa yang terlihat di blog ini tepatnya ada dibagian atas dibawah breadcrumb blog ini, tutorial ini sebagai tambahan ilmu bagi saya yang masih belajar ngblog, langsung aja ke pokok bahasan.

• Pertama-tama lakukan login sebagaimana biasa mau mengedit Template
• kemudian klik template >> jangan lupa "Download Template Lengkap" untuk melakukan proses BACK-UP Template, untuk jaga-jaga.
• setelah selesai klik Edit HTML >> lanjutkan >> centang Expand Template Widget.
• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode, kemudian simpan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.

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

• kemudian Simpan javascript di bawah dibawah ini tepat dibawah kode ]]></b:skin>

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

• Langkah selanjutnya cari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, setelah ketemu kemudian ganti kode tersebut dengan xHTML dibawah ini;

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

• KLIK "SAVE Templates (Simpan Templates)".

Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 06.17.2012).

• KLIK "SETTINGS" (Pengaturan).
• KLIK "FORMAT".
• Lihat "Format Header Tanggal".
• Rubah format tanggal sesuai contoh di atas.
• KLIK "SAVE (Simpan).
• Buka blog dan lihat hasilnya!