Merubah Tanggal Posting dalam Bentuk Icon Kalender

Membuat blog menjadi lebih menarik merupakan kesibukan besar blogger selain aktivitas posting yang sangat menyita waktu, energy dan terutama otak. Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini (Lihat di sebelah kiri judul posting!). Membuat wajah baru seperti ini dapat dilakukan dengan beberapa cara, namun dari sekian banyak yang termudah adalah dengan cara yang akan tersampaikan di bawah. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Merubah Tampilan Tanggal Posting

• Lakukan login terlebih dahulu untuk mempercepat proses pembuatan bentuk tanggal posting yang baru.
  • Tulis User Alamat Email (Email Address).
  • Tulis Password.
  • KLIK "LOGIN"
• KLIK "DESIGN/RANCANGAN".
• KLIK "EDIT HTML".
• KLIK "Download Template Lengkap" untuk melakukan proses BACK-UP Templates.
  • Simpan file template di folder PC. Berikan nama yang berkaitan dengan saat perubahan desain dilakukan (contoh: dec10) untuk memudahkan saat file ini diperlukan kembali.
  • Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
  • KLIK "Expan Widget Templates".
• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode.
  • Setelah anda klik Ctrl+F secara bersamaan, copy-paste kode ]]></b:skin> dalam box pencarian.
  • KLIK "Find".
• Simpan javascript di bawah kode ]]></b:skin> dan Kode CSS di atas kode ]]></b:skin>.
• Lanjutkan dengan mencari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML yang baru (disertakan di bawah!).
• KLIK "SAVE Templates (Simpan Templates)".

Javascript

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

Kode CSS

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

]]></b:skin>

xHTML

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

Setelah semua proses selesai, lakukan 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!

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reyot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin