Setelah sekian lama istirahat memposting tentang tips seo atau trik blogger, ternyata banyak pertanyaan dan masukkan dari teman-teman OB melalui kolom komentar. Satu-persatu OB simak dan "duaarrr" tiba-tiba meletus balon hijau (becanda...). Salah satu pertanyaan yang sementara ini dapat OB posting adalah dari sobat Ad4m San. Memang sobat OB yang satu ini rada-rada ganjil. Kadang kalau tidak/belum dipenuhi keinginannya, bisa-bisa waktu ketemu di jalan abis ini kepala pada benjol semua. Dan kalau kamu punya waktu senggang kunjungi juga blognya Ad4m San di sini. Pertanyaannya seperti ini :
"Mas numpang tanya lagi hehehe klo mau buat tanggal disamping judul post kaya di http://www.faizoi.co.cc, gmn mas???"
Ayo kita belajar bersama-sama mengupas trik blogger merubah tanggal posting menjadi icon kalender.
Langkah I :- Login ke account blogger kamu.
- 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".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
- Cari kode CSS di bawah ini, letaknya antara <head> ... </head>.
h2.date-header {
...
}
atau
.date-header {
...
}
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
- 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 kamu 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.
Apabila menggunakan trik blogger ini, tanggal posting (date header) dalam template blog kamu harus berada di atas judul posting (post title) atau posting (post).
Jika 1 atau 2 baris paragraf postingan kamu ikut masuk kmenjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan kamu berada di bawah icon tanggal).
Jika 1 atau 2 baris paragraf postingan kamu ikut masuk kmenjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan kamu berada di bawah icon tanggal).
Sumber : Cara Mengganti Tanggal Posting dg Icon Calender by Bang Kendhin.
Selamat merubah tampilan tanggal posting...
0 Komentar untuk "Merubah Tanggal Posting menjadi Icon Kalender"