Cara Mengganti Tanggal Posting Dengan Icon Kalender

Posted by : Anonymous

Pertama yang harus kita lakukan yaitu mengganti setting tanggal dulu,

caranya :

Login dulu ke Blogger hingga masuk Dasbor
Klik Pengaturan
Klik Format, ganti Format Header Tanggal atau format tanggal menjadi (mm.dd.yyyy) formatnya bulan.tangal.tahun contohnya8.03.2010 SIMPAN SETELAN kemudian

Langkah yang kedua masih dalam Dasbor

Klik Rancangan (Yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
Kemudian cari kode<title><data:blog.pageTitle/></title> kalau sudah ketemu taruh Script berikut ini dibawah kode tersebut.

//<![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>

Kalau sudah cari kode seperti dibawah ini :

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

kalau nggak ada coba cari yang seperti ini :

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

Kalau sudah ketemu taruh Script berikut dibawahnya

.dateblock {
background: url("http://i291.photobucket.com/albums/ll311/caprt3a/My%20Galery/blackcalend.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:#ff0000;
font-size: 19px;
width: 37px;
margin: 0 5px;
}

Keterangan :
Kode: http://i291.photobucket.com/albums/ll311/caprt3a/My%20Galery/blackcalend.gif
adalah gambar icon kalender.
sobat bisa menggantinya dengan gambar-gambar dibawah ini:

Redcalend.gif

Bluecalend.gif

Pinkcalend.gif

Blackcalend.gif

Yellowcalend.gif

Jika kode color:#ff0000; adalah kode warna tanggal, sobat bisa menggantinya dengan warna yang lain.

langkah selanjutnya yaitu sobat cari kode ini <data:post.dateHeader/>, cara nyarinya biar gampang Copy kode tersebut,
terus tekan F3 dan Paste di dalam kotak yang disediakan, kalau sudah ketemu ganti kode tersebut dengan Script dibawah ini:

Simpan Template

Kalau 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 : Kalau Tanggalnya berubah menjadi tulisan Undefine itu pasti sobat tidak memperhatikan tutorial ini dari awal.
Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya.