Cara Menukar Tarikh Posting kepada Icon Kalender

Langkah pertama ialah kita mesti menukar format tarikh terlebih dahulu, caranya seperti biasa Login dulu ke blogger seterusnya pilih Settings-->Formatting, gantikan"date header format" atau "format tarikh menjadi (mm.dd.yyyy) pilih yang formatnya bulan.hari.tahun contohnya (1.13.2008) ...perhatikan betul-betul kat sini, kalau silap pilih nanti ade masalah dengan icon kalendar tu, kalau dah yakin betul klik save.

Langkah yang kedua pilih menu Layout => Edit HTML . Jangan lupa tandakan pada kotak Expand Widget Templates. Sebelum tu, kalau nak selamat sila back up template ataupun Download Full Template.

Kemudian cari kode ini <TITLE><data:blog.pageTitle/></TITLE>(tempatnya dibahagian paling atas) kalau dah jumpa, letakkan script berikut ini dibawahnya.

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

2. Kemudian cari kode ini:

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

kalau tidak ada cuba cari yang ini

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

3. Kalau dah jumpa letakkan script berikut dibawahnya

.dateblock {
background: url("http://www.geocities.com/almansuqie08/yellowcalend.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;

}

Kode http://www.geocities.com/almansuqie08/yellowcalend.gif adalah gambar icon kalender. Antum boleh menukarkannya dengan gambar-gambar dibawah ini. Caranya gantikan bahagian yang diboldkan dengan kode gambar berikut ini, contohnya, kalender yang berwarna merah, caranya Antum ganti text bluecalend.gif dengan redcalend.gif. ok.

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

Seterusnya kode color:#3366CC; adalah kode warna
tarikh, Antum boleh tukarkan dengan warna yang lain. Kode warna DISINI.

4. langkah selanjutnya cari kode ini <data:post.dateHeader/>, kalau nak mudah copy kode tersebut, kemudian tekan Ctrl-f dan paste di dalam kotak yang disediakan, terus jumpa kan. Pastu gantikan kode tersebut dengan script dibawah ini.

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

5. Simpan Template Antum dan lihatlah hasilnya. menjadi ke tidak?

Kalau tulisan bulan dan tarikhnya terlalu keatas cuba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

6. Kalau tarikhnya berubah menjadi tulisan "Undefine" mesti Antum tidak memperhatikan tutorial ini betul-betul. Cuba lihat lagi tutorial ini dari awal dan ikut stepnya betul-betul. ok.

semoga berjaya..