Mengubah Tanggal Postingan Dengan Icon Kalender

Apakah Anda pernah melihat sebuah postingan yang di samping kiri judulnya terdapat sebuah kalender cantik yang menunjukkan tanggal pembuatan postingan tersebut, dan apakah pernah terbesit dalam benak Anda untuk menerapkannya pada postingan blog Anda? Kalau jawabannya yah berarti sama dengan apa yang pernah saya alami ketika membaca sebuah tulisan, yang secara kebetulan di samping kiri dari judul postingannya ada sebuah kalender cantik. Didorong oleh rasa penasaran bagaimana caranya membuat kalender cantik tersebut, membuat saya melakukan penelusuran menggunakan jasa om google dengan kata kunci "cara mengubah tanggal postingan dengan icon kalender di blog" akhirnya ketemu juga. Awalnya saya kebingunan menerapkannya karena penjelasan yang ada tidak disertai gambar, dengan uji coba beberapa kali yang saya lakukan akhirnya bisa juga dan pengalaman itulah yang saya muat pada postingan kali ini agar pembaca bisa lebih cepat memahaminya. Tulisan ini sebenarnya merupakan gabungan dari beberapa tulisan yang sudah terbit sebelumnya oleh bloger-bloger lain, yang dimodifikasi penjelasannya dan disertai gambar dengan harapan pembaca lebih cepat mengerti langkah-langkahnya. Untuk itu ikuti langkah-langkahnya secara step by step berikut ini:

Langkah Pertama :
1. Login ke blogger dengan ID anda
2. Pilih Tab Setting / Pengaturan
3. Pilih Tab Format

4. Pada Kotak Format Header Tanggal ganti dengan Format Bulan, Tanggal, Tahun.

Contoh : 7.17.2009 (Bulan Juli, Tanggal 17, Tahun 2009)
5. Setelah melakukan perubahan jangan lupa klik tombol Simpan
Untuk lebih jelasnya perhatikan gambar berikut :



Langkah Kedua :

Pilih menu Layout/Tata Letak lalu pilih tab Edit HTML. Terus beri tanda centang/contreng pada kotak Expand Widget Templates. Untuk sekedar menjaga-jaga terjadinya kegagalan dan menghindari kerusakan sebaiknya membackup dulu templatnya dengan mengklik tulisan Download Template Lengkap, yang dapat didownload kembali apabila terjadi kesalahan. Untuk lebih jelasnya perhatikan gambaar berikut :

Langkah Ketiga :

a. Cari kode <TITLE><data:blog.pageTitle/></TITLE> kalau sudah ketemu letakkan script berikut ini dibawah kode tadi.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
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>

b. Kalau sudah cari lagi kode berikut :

date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Kalau tidak ketemu coba cari kode berikut :

h2.date-header {
margin:1.5em 0 .5em;
}

c. Kalau sudah ketemu letakkan script berikut di bawah kode tersebut :

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://kendhin.890m.com/kalender/bluecalend.gif adalah gambar icon kalender yang ada dan dapat diganti sesuka hati sesuai keinginan. Adapun caranya ganti huruf yang dicetak tebal dengan kode gambar berikut ini, misalnya kita kepingin kalender yang berwarna merah caranya tinggal ganti text bluecalend.gif dengan redcalend.gif.

Terus kode color:#3366CC; adalah kode warna tanggal, anda dapat menggantinya dengan warna lain sesuai keinginan. Untuk kode warma pada HTML klik DISINI.

d. Langkah selanjutnya cari kode ini <data:post.dateHeader/>. Untuk memudahkan pencarian copy saja kode tersebut lalu tekan Ctrl+F dan paste pada kotak yang ada. Setelah ketemu kode tersebut silahkan ganti dengan kode script dibawah ini :

<SCRIPT type='text/javascript'>
<div class='dateblock'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>

e. Silahkan Klik Pratinjau yang ada di pojok kanan atas untuk melihat hasil sementara.
f. Apabila hasil tersebut sudah dirasa cocok dan benar silahkan klik TERBITKAN ENTRI.

SELAMAT MENCOBA SEMOGA BERHASIL