Merubah Tanggal Posting menjadi Icon Kalender

Posted by rike on 0

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 :

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.

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 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...

Bisnis Kecil Modal Kecil

Merubah Tanggal Posting menjadi Icon Kalender

0 comments:

Popular Posts

Blog Archives