Cara membuat tanggal postingan dengan icon kalender.

Catatan Pendek Penulis | Sebenarnya trik ini sudah ada dan dipakai sudah sangat lama oleh para blogger, tapi karena saya baru menemukan dan mempraktekannya di blog saya hari ini makanya saya tulis ulang di blog saya mengenai trik cara membuat tanggal postingan dengan icon kalender.
Script ini bisa mempercantik blog anda, karena yang akan tampil adalah icon kalender pada tanggal postingan kita.

membuat icon kalender pada postingan

Perhatikan satu-persatu langkahnya, karena ketika ada error "Undefine" itu tandanya anda tidak mengikuti instruksi dan langkah yang akan saya informasikan di sini.
1. Setting tanggal pada blog anda. Masuk ke Setting > Formating > Date Header Format menjadi dd.mm.yyyy atau 01.12.2013
2. Masuk ke Template > Edit HTML > jangan lupa centang kotak Expand Widget Templates.
3. Cari kode <TITLE><data:blog.pageTitle/></TITLE> dan simpan kode dibawah ini tepat dibawahnya.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://www.pakepe.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>

4. Selesai. Lalu cari kode dibawah ini.

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

atau cari kode dibawah jika tidak ditemukan

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

5. Kalau sudah ketemu lalu simpan kode dibawah ini tepat dibawahnya.

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/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://img600.imageshack.us/img600/3576/bluecalend.gif adalah kode untuk warna kalender dapat anda ganti sesuai keinginan anda. Dibawah ini saya berikan beberapa warna pilihan.

 http://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif

http://img805.imageshack.us/img805/9918/blue2calend.gif

http://img600.imageshack.us/img600/3576/bluecalend.gif

http://img837.imageshack.us/img837/4311/greencalend.gif

http://img137.imageshack.us/img137/3329/orangecalend.gif

http://img196.imageshack.us/img196/8339/pinkcalend.gif

http://img837.imageshack.us/img837/9199/redcalend.gif

http://img220.imageshack.us/img220/3262/ungucalend.gif

http://img818.imageshack.us/img818/1760/yellowcalend.gif

lalu kode color:#3366CC; adalah kode warna tanggal, bisa anda ganti sesuai keinginan. Untuk melihat kode warna ada DISINI.

6. Setelah semuanya selesai lanjut ke tahap selanjutnya yaitu cari kode <data:post.dateHeader/> dan ganti dengan Script

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

7. Simpan templates kamu dan liat hasilnya.
Jika tanggal dan bulannya terlalu keatas atau tidak center, silahkan sisipkan kode padding: 4px 0px 0px 0px; dibawah kode .month { dan .day {

Sekali lagi jika ada error "Undefine" mungkin ada langkah anda yang salah, perhatikan dan ulangi lagi langkahnya.

Selamat mencoba.