Blogspot: Tutorial membuat icon calendar

langkah-langkahnya:

1. Login blogspot->Setting -> Formatting. kemudian tukar "date header format" menjadi format fate "mm.dd.yyyy" dan simpan.

2. Seterusnya pergi ke Template -> Edit HTML->tick Expand Widget Templates.(Jangan lupa backup templates anda terlebih dahulu).

3. Kemudian, cari code <TITLE><data:blog.pageTitle/></TITLE> dalam html code templates anda.Apabila dah jumpa letakkan code di bawah ini di bawah code tadi.

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

4. selanjutnya cari code di bawah ini dengan tekan ctrl+F (utk cari)

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

sekiranya tiada code diatas ini cari code di bawah ini

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

5. Kemudian, bila dah jumpa letakkan code di bawah ini di bawah code di atas.


.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
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;

}

6. Seterusnya cari code ini <data:post.dateHeader/> dan tukar code tersebut kepada code ini

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

7. Langkah terakhir anda simpan dan lihat hasilnya.berjaya???? sekiranya tidak cuba lagi dan buat dengan teliti.

Note: Jika paparan bulan dan date pada icon tersebut tinggi atau tidak cantik atau ke atas sila tambah code ini pada code css padding: 4px 0px 0px 0px; di dalam code .month { dan dalam code .day {

Note : Code http://blogoholic.info/files/kalender/bluecalend.gif ini anda boleh ubah untuk memilih jenis icon calendar themes seperti di bawah.Anda hanya perlu tukar pinkcalend.gif atau ungucalend.gif atau mengikut citarasa anda.

Rujukan : trick blogspot