Mengubah Tanggal Posting menjadi Kalender

Posted by : Arief Hilman Nugraha Friday, January 18, 2013

Posting ini akan bahas bagaimana sobat dapat mengubah tanggal posting menjadi icon kalender. Trik yang satu ini lumayan panjang cara kerjanya namun jika ingin tau bagaimana cara membuatnya berikut adalah langkahnya....

1. Masuk ke Pengaturan klik Format
2. Klik pada kotak drop down dan ganti formatnya bulan.hari.tahun (mm.dd.yyyy)
3. Simpan hasilnya
4. Masuk ke Rancangan dan pilih Edit Html
5. Klik Expand widget template dan backup template sobat.

6. Kopi kode dibawah ini lalu letakkan diatas 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>

7. Cari kode seperti ini .date-header kalau tidak ada, coba cari kode h2.date-header {
8. Kalau udah ketemu letakan kode ini dibawahnya

/* ------ Kalender Icon Ariefhunterz ----- */
.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;
}

11. Kode http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif adalah gambar icon kalender sedangkan kode berwarna merah adalah kode warna tanggal, sobat bisa ganti dengan warna yang lain. Untuk mengubah kalender ganti url gambar dengan akhiran kode seperti dibawah ini: