Mengubah Tanggal Posting menjadi Kalender

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>

<!-- Kalender Icon Blogtrikdantips -->
<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 Blogtrikdantips ----- */
.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:

greencalend3.gif	yellowcalend3.gif	orangecalend3.gif
pinkcalend3.gif	ungucalend3.gif	redcalend3.gif

12. Langkah terakhir yaitu sobat cari kode ini <data:post.dateHeader/> dan hapus kode tersebut lalu ganti dengan kode dibawah ini:

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

13. Simpan template sobat lalu lihat hasilnya
Selamat mencoba!!!!

Share on :

Tweet