Mengubah Tanggal Posting Menjadi Icon Kalender

Untuk merubah atau mengganti tanggal posting dengan icon kalender kita hanya sedikit mengganti kode HTML Jika temen-temen tertarik berikut ini langkah-langkah pembuatannya :
Langkah I :
  • Login ke account blogger anda.
  • Pilih Pengaturan --> Format
  • Dalam halaman Format, ganti Format Header Tanggal menjadi seperti ini mm.dd.yyyy (bulan.hari.tahun), ex: 6.02.2009.
  • Simpan Setelan

Langkah II :
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
  • Cari kode CSS di bawah ini, letaknya antara <head> ... </head>.
h2.date-header { ... }
atau
.date-header { ... }
  • Kalau sudah ketemu, copas kode berikut tepat dibawah kode CSS di atas.
.dateblock {
background: url("http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif") no-repeat;
margin: 0 10px 0 0; font-weight: bold; width: 33px; height: 36px; /*position: absolute; top: 0; left: 0;*/ float: left; text-align: center; } .month { font-size: 8px; width: 34px; margin: 0 auto; padding-top: 2px; text-transform: uppercase; color: #fff; } .day { color:#3366CC; font-size: 12px; width: 34px; margin: 0 auto; padding-top: 2px; }
Catatan:
  • Silakan ganti kode yang berwarna merah dengan kode warna di sini.
  • Silakan pilih image background untuk icon kalender anda dengan mengganti kode yang berwarna hijau dengan nama file di bawah image berikut.
  • greencalend3.gifyellowcalend3.giforangecalend3.gif
    pinkcalend3.gifungucalend3.gifredcalend3.gif
  • Kemudian lakukan copas kode di bawah ini dan letakkan di atas kode </head>.
<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>
  • Terakhir cari kode di bawah ini.
<data:post.dateHeader/>
  • Dan ganti dengan kode berikut.
<div class='dateblock'> <script>date_replace('<data:post.dateHeader/>');</script> </div>
  • Jangan lupa disimpan.
Catatan Penting : Apabila menggunakan cara  ini, tanggal posting (date header) dalam template blog anda harus berada di atas judul posting (post title) atau posting (post).
Jika 1 atau 2 baris paragraf postingan anda ikut masuk menjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan anda berada di bawah icon tanggal).

Poting ini di-copas dari : http://kackdir.blogspot.com/2011/01/mengganti-tanggal-posting-dengan-icon.html

Tidak ada komentar:

Posting Komentar