Cara Mengganti Tanggal Posting dengan Icon Kalender

Tambah lagi postingannya. Kali ini ukhra akan share tentang bagaimana mengganti tanggal posting biar lebih cool pake icon kalender. Asyik yaa yang namanya berbagi..Langsung aja deh caranya.... Uppz, tapi sebelumnya kamu harus mensetting dulu blog kamu. Setelah masuk ke dasbor, pilih Setting, Format, dan atur data header format/format tanggal manjadi mm.dd.yy. Contohnya 4.12.2009.. Setelah itu, anda ikuti langkah - langkah di bawah ini

1. Masuk ke Layout
2.Klik Edit HTML
3. Beri centang pada Expand Widget Template
4.Kemudian, cari kode <TITLE><data:blog.pageTitle/></TITLE>

5.Setelah itu, taruh kode di bawah ini di atas kode yang tadi

<SCRIPT type='text/javascript'><br /> //<![CDATA[<br /> /*********************************/<br /> /* http://trik-tips.blogspot.com */<br /> /*********************************/<br /> function date_replace(date) {<br /> var da = date.split('.');<br /> var day = da[1], mon = da[0], year = da[2];<br /> var month =<br /> ['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];<br /> document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");<br /> }<br /> //]]><br /> </SCRIPT> <br /> <br />

6. Kemudian cari kode berikut

.date-header {<br /> margin: 1.5em 0 0;<br /> font-weight: normal;<br /> color: $dateHeaderColor;<br /> font-size: 100%;<br /> } <br />
Kalo nggak ada, coba yang ini

h2.date-header {<br /> margin:1.5em 0 .5em;<br /> }

7. Kalo sudah ketemu, taruh script berikut dibawahnya

.dateblock {<br /> background: url("http://kendhin.890m.com/kalender/bluecalend.gif")<br /> no-repeat;<br /> width: 55px;<br /> margin: 0;<br /> font-weight: bold;<br /> height: 50px;<br /> /*position: absolute;<br /> top: 0;<br /> left: 0;*/<br /> float: left;<br /> text-align: center;<br /> }<br /> <br /> .month {<br /> font-size: 11px;<br /> width: 37px;<br /> margin: 0 5px;<br /> text-transform: uppercase;<br /> color: #fff;<br /> }<br /> <br /> .day {<br /> color:#3366CC;<br /> font-size: 19px;<br /> width: 37px;<br /> margin: 0 5px;<br /> <br /> }

Kode http://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. Anda bisa menggantinya sesuai warna yang diinginkan, misalnya kamu pingin kelender yang berwarna merah, caranya kamu ganti text bluecalend.gif dengan redcalend.gif.

blackcalend.gif	blue2calend.gif	bluecalend.gif
greencalend.gif	orangecalend.gif	pinkcalend.gif
redcalend.gif	ungucalend.gif	yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI. 8. Setelah itu, cari kode <data:post.dateHeader/>, Kalo sudah ketemu, ganti kode tersebut dengan kode di bawah ini

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

9. Save deh.... Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day { NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D

Posted in: Tips Blog