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..