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..
8 Komentar:
thanks byk2...aku dah berjaya selesaikan masalah blog aku lyg xde tarikh tue.thanks sgt2 untuk tutorial nie...aku nak kongsikan pada pembaca blog aku nanti,dan akan bagi link kat sini.tq
aku dah test..juz ada sedikit problem..aku rasa ada sesetengah post yg trik nie gagal dapatkan maklumat..dia xshow pape kat kotak calendar tue..tapi bila klik pada topik tue,baru kuar date.camne ek ??
ade ke problem mcm tu..xpenah pulak jadi mcm tu..masalah sementara kot. ;)
enta kongsi2 la ngn kawan2..Ana wat ni mmg tuk dikongsi.
slm,cmne saya wat x jd rr..psl pd step yg ke-2 tuh kod
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
or
h2.date-header {
margin:1.5em 0 .5em;
}
dua2 x jupe...hrp bleh tlg!!
cari kod yang lebih kurang sama..Pada step tu letak lepas kod ini.
.post-date {
margin:0;
padding:5px;
width:60px;
height:50px;
background:#000;
border:1px solid #363636;
position:absolute !important; position:relative; float:left;
display:inline;
}
alhamdulillah...jazakallah akhi
assalam..sy da cuba...jd gak..thanks..tapi mslhnye post jd sblh icon kalendar..camne nk ltk post bwh icon 2?
yeah kapok sisan
Post a Comment
1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>