Ganti Hari Posting dgn Icon Kelender

Arrghh!!! Hari ni penat aku edit template aku ni. Dan akhirnya aku dapat buat trick baru. Haha, macam mana??cun x? Post Date kite tukar jadi kelendar. Kalau anda xsuka, xpayah la baca tentang posting ini lg. hahahaha...

Malas la nak cakap banyak2, ni aku post caranya :-

Yang pertama korang kne lakukan yaitu mengganti setting hari dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format hari menjadi (mm.dd.yyyy) ha yang masih newbie mcm aku mesti pening maksudnya kan? ini lorh disebelah tulisan "date header format" kan ada kotak yang ada harinya, korang terus klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus save.

Langkah yang kedua pilih menu Layout --> Edit HTML . Terus ditanda rait pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template korang. Kalau ada apa2 kerosakan templete aku tak tanggung.hehehe.
1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalau dah jumpa letakkan script berikut ini dibawahnya

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://myp4u.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. kalau dah cari kode ini:

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

kalau xjumpa korang cuba cari yang ini

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

3. Kalau dah jumpa letakkan script berikut dibawahnya

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.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://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. korang boleh mengantikannya
dengan gambar-gambar dibawah ini caranya ganti huruf yang dicetak tebal dengan
kode gambar berikut ini, misalnya korang nak kelendar yang berwarna merah,
caranya ganti text bluecalend.gif
dengan redcalend.gif.

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

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Korang boleh lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu cari kode ini
<data:post.dateHeader/>, cara mencarinya biar senang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, ha kan terus jumpa. kalau dah jumpa ganti kode tersebut dengan script dibawah ini.

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

5. Simpan Template korang dan lihat hasilnya. Berhasil tak ya?

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

P/S: Kalau Harinya berubah menjadi tulisan "Undefine" itu pasti korang tidak memperhatikan tutorial ini dari awal. Cuba lihat lagi tutorial ini dari awal dan baca baik-baik. ikut step ya..

Selamat mencuba.

**Pelawat yang disegani:- Berikan komen anda selepas membaca artikel dan membuat sebarang trick didalam blog ini. Komen anda membolehkan saya memperbaiki dan mempertingkatkan lagi kualiti blog ini. Komen anda amat dihargai. Terima Kasih.

Related Posts by Categories