- 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 {Catatan:
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; }
- 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.gif | yellowcalend3.gif | orangecalend3.gif |
pinkcalend3.gif | ungucalend3.gif | redcalend3.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
Poting ini di-copas dari : http://kackdir.blogspot.com/2011/01/mengganti-tanggal-posting-dengan-icon.html
Tidak ada komentar:
Posting Komentar