Beranda » Tutorial dan tips-trik Blogspot » Mengganti Tanggal Postingan Menjadi Icon Kalender

Mengganti Tanggal Postingan Menjadi Icon Kalender

Ditulis oleh: -
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:

1. Silakan ganti kode yang berwarna merah dengan kode warna di sini.
2. 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.

Catatan Penting :
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 menjorok 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).

Selamat merubah tampilan tanggal posting...

Artikel terkait :

0 komentar "Mengganti Tanggal Postingan Menjadi Icon Kalender", Baca atau Masukkan Komentar


Posting Komentar