Ganti Tanggal Posting Dengan Ikon Kalender

Bosan dengan tampilan tanggal yang gitu-gitu aja pada postingan kita? Hmm berikut ada tips untuk mengganti tanggal posting dengan icon kalender seperti pada postingan ini. Caranya cukup mudah kok sob, OK langsung ke TKP.... (kriminal kaleee).
Pertama sobat ganti dulu setingan tanggal pada BLOG sobat, caranya???
1. Login dulu donk.
2. Masuk ke menu Settings/Pengaturan
3. Pilih sub menu Formatting/Format, ganti DATE HEADER FORMAT atau FORMAT TANGGAL jadi (mm.dd.yyy) - (month.day.year), kayak gini misalnya 3.20.2009
4. Simpan pengaturannya.

Lanjutkan perjuangan sob ^_^
Langkah kedua, sobat masuk ke menu layout/tata letak - Edit HTML, jangan lupa kasih tanda centang pada kotak "EXPAND WIDGET TEMPLATES". Tapi seperti biasa, sob harus back-up dulu templatenya. Wokeh selanjutnya ikuti langkah berikut ini :
1. Cari kode <TITLE><data:blog.pageTitle/></TITLE> (ada dibagian atas template), biar cepet nyarinya, teken CTRL+F, terus copaz kode yang barusan.
2. Kalo udah ketemu, taruh kode berikut ini dibawah kode tersebut.

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

3. Selanjutnya sobat cari kode berikut ini :
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
Kalo di template sobat gak ada kode seperti itu, coba cari yang ini :
h2.date-header {
margin:1.5em 0 .5em;
}

4. Udah ketemu ya? Selanjutnya taruh kode berikut ini dibawahnya.

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">.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;

}

Catatan:
- Kode http://kendhin.890m.com/kalender/bluecalend.gif adalah gambar icon kalender yang sobat pake'.
- bluecalend.gif itu berarti kalendernya warna biru, kalo mau warna kuning, sobat tinggal ganti tulisan blue dengan yellow atau dengan warna-warna yang lain, eitssss tentunya pake' bahasa inggris ya tulisnya? Wkwkwkwk....
- Kode color:#3366CC adalah kode warna tanggalnya, sobat bisa menggantinya sesuai selera sobat.

4. Selanjutnya sobat cari kode <data:post.dateHeader/> Terus kalo udah ketemu, sobat ganti kodenya dengan kode berikut ini :

<p align="center"><textarea name="code" rows="6" cols="20"> <DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Langkah terakhir, simpan template sobat. Hayoo diliat dulu penampakannya, berhasil gak tuh???
6. Kalo misalnya tulisan bulan dan tanggalnya posisinya agak keatas, sobat tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan dibawah kode .day {

Akhir kata,, selamat mencoba sob......