Isnin, 11 Jun 2012

. Tutorial - Calendar Belog.

Siti Nurfariha | 4:22 PTG | 0Comments |
teacher fariha yang lagi cute nak buat tutorial ni, siapa nak belajar!?hehehe. tengah bosan bosak dekat office tak tahu nak buat apa, dah mati kutu ni tak ada kerja nak buat so amik kesempatan atas apa yang ada kita buka belog tercinta :-) ngehngehngeh

Sebelum itu kita nak bagi introduce sikit untuk tutorial ini. calendar belog ni sebenarnyakan sama juga dengan blog archive biasa tapi dia lebih compact dan sejuk mata apabila dipandang hehehe =.=. 

Contohnya, kalau reader click mana-mana tarikh kat calender itu, maka dengan izin allah entry yang di tulis pada tarikh tersebut akan keluar. Reader pun senang nak cari sebab tarikh-tarikh yang kita tulis entry tersebut akan di BOLD kan.nampak tak anak panah tuh tunjuk apa! ha itu lah calendar yang dia boleh review entry lepas lepas
Cara nak buatnya senang sahaja :

1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah dan paste ke dalam Html/Java Script



<center><div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="sitinurfariha.blogspot.com/";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
#blogCalendar {
display:block;
text-algin:center;
border:3px solid #ffffff;
width:90%;
background: #ffffff;
}
#CalendarCaption a {
text-decoration:none;
}
#CalendarCaption {
border-bottom: 2px solid #ffffff;
width:85%;
margin:auto;
}
#CalendarTable a {
font-weight:bold;
color: #ff0000;
}
.Today {
background: #ffffff;
font-weight:bold;
text-decoration:none;
}


#CalendarFooter {
font-weight:bold;
margin-top:5px;
margin-bottom:5px;
background: #ffffff;
}
.yearInput {
color: #000000;
background: #ffffff;
}
.monthTable {
color: #000000;
background: #ffffff;
}
</style></center>


3. Gantikan sitinurfariha.blogspot.com dengan link blog korang.warna font merah tu warna untuk background dan border. Nak tukar colour tengok sini. Kalau nak macam gambar di atas guna je code yang kita dah bagi tu.

4. Save dan lihat hasilnya.

Tiada ulasan: