Rabu, 19 Januari 2011
Mengganti Tanggal Posting Dengan Icon di Blog
Untuk sekedar mengingatkan kita sebagai seorang blogger, kapan kita posting atau menulis artikel diperlukan sebuah tanggal posting. Yah itu kira-kira salah satu fungsi dari menu tanggal (date) posting yang terdapat di setiap blog. Menu tanggal kita posting di setiap blog berbeda-beda, ada yang terletak di atas ada juga yang terdapat di bawah postingan. Tampilannya pun tiap blog juga berbeda-beda, tergantung template yang dipakai. Secara default menu tanggal posting di blog hanya berupa tulisan tanggal, bulan dan tahun. Agar lebih menarik kita bisa pasang icon kalender agar tanggal posting lebih kelihatan menarik.
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
- 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).
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).
Demikian tadi tutorial mengenai cara merubah tanggal posting dengan idon kalender, kode-kode HTML diatas saya dapatkan dari Bang Kendhin. Selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog