Memasang Blog Kalender Sebagai Blog Archive (blogspot)

*hierarchy blog archive

Ada pembaca request tutorial kalender kat aku. Ini bukan sebarang kalender tahu. Tapi ni kalender khas untuk Blog Archive kita. Sepertimana yang kita tahu, Blogger hanya menyediakn 3 pilihan untuk Blog Archive iaitu dalam bentuk hierarchy,flat list atau dropdown menu.

Tapi aku tak berapa suka nak pasang blog archive sebab interface dia yang kurang menarik perhatian aku. Paling tidak pun aku hanya suka pasang dropdown menu. Bukan apa, kalau dah makin banyak updated nanti hierarchy aku tu panjang berjela-jela kat sidebar tu.haha.

Maka aku dah jumpa solution untuk perkara ini. Aku jumpa tutorial untuk mencantikkan lagi blog archive kepada blog calender tu kat blog Eldy.

*blog archive yang lebih kemas dan cun

Baiklah. Jom start tutorial ni.

01. Login ke dashboard.
02. Layout > Add a Gadget > HTML/Javascript
03. Copy paste code kat bawah ni ke dalam kotak HTML/Javascript

<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="http://rojakstory.blogspot.com";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
#blogCalendar {text-align:center;border:0px;background: url(http://jessieshu1984.googlepages.com/blog01-7.jpg) no-repeat top;margin:0;font-family:arial;height:180px;line-height:14px;}
#CalendarCaption a{color:#777;text-decoration:none;margin:auto;font-size:80%;}
#CalendarCaption{width:80%;margin:auto;}
#CalendarTable{height:123px;margin-top:2x;}
#CalendarTable a{font-weight:bold;color: purple;}
#CalendarTable table {width:auto;margin:auto;border: 0px;text-align:center;font-size:80%;padding-top:5px;}
#CalendarTable table th{font-size:85%;}
#CalendarTable table td{border:0px;}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{font-weight:bold;Text-decoration:underline;}
#CalendarTable a:hover {text-decoration:none;}
#CalendarMonth{font-size:90%;}
.Today{text-decoration:none;color: darkred;}
.Today a:visited, .Today a:link, .Today a:active, .Today a:hover {text-decoration:none;color: #ddd;}
#CalendarFooter{color:Green;font-size:80%;padding-top:10px;}
#monthTable{background:#eee;}
.yearInput{background:#eee;}
</style>

Merah: Tukarkan URL BLOG aku tu kepada URL BLOG korang k.

04. Save.

Kalau terlebih advanced, boleh edit code tu. Contohnya tukar kepada warna yang korang suka. Boleh tambah background dan sebagainya.

Masuk blog ini atau backup sitenya kat SINI untuk pilih design lain. Sila klik pada ENGLISH untuk lebih paham. Masukkan URL BLOG korang kat kotak yang disediakan. Set-kan time ke GMT+08:00. Lepas tu pilih design yang korang nak kat Present Style tu dan kemudian tekan SHOW CALENDER. Kalau dah berkenan dengan blog calender yang korang pilih tu, tekan INSTALL TO BLOG. Siap!

Senang je kan? Selamat mencuba :D