新增功能: 放月曆(calender)

找過好幾篇網友的文章, 一開始也失敗好幾次
後來看到了HolyBell's Blog:在Blogger中插入月曆的文章才又燃起一線希望

我跟HolyBell一樣也是只會照著別人的東西剪剪貼貼,
畢竟一般人沒學過CSS是不會去改什麼參數更何況要看懂了,
我只要求看得順眼也不想花腦筋去改有的沒的，
月曆其實可以看個人需要做不同格式變化, 如果你會使用CSS，
就可以依照自己的blog做出符合自己版面顏色的造型囉。

下面是他參考過的文章, 我看過1和2但都無法使用。
1. 笨蛋壩子的隨筆 -- 在Blogger上安插月曆( Calendar) - IE 修正版
2. Kevin的私人書房 -- 實作Blogger月曆( Calendar)
3. Abin's Tech Note -- 為 Blogger 加入整合日曆 Archive Calendar
原本以為第三項跟我要的是不同的就跳過了, 沒想到最後是他救了我:P
下面就是教學囉～以我使用的部份，貼出來。

安裝月曆有兩種方法，一種是先在範本"修改html"裡面修改完，
再到"網頁元素"當中加入可以安插"HTML/JavaScript"的功能，
另一種就是我使用的方法，直接在範本"修改html"裡面修改完成。

首先，在你的 Sidebar 上面要至少有一個 "Blog 存檔" (Archive) 的網頁元素 (Element)，接下來去修改它的屬性，存檔頻率改成「每日」，勾選「先顯示最舊的文章」，樣式設成「Flat 清單」。(from Abin) PS.如果想要保有原來的Archive格式，請看Abin的介紹，因為我直接用月曆取代Archive了！

第二步驟，在範本"修改html"中安插 Calendar 使用的 CSS ，放在 標籤內就行，就是定義樣版的區段裡。請依照個人樣版修改，記得先完整備份你的 Template，不用展開小裝置範本修改：

在 /* Footer 之前插入以下程式碼

/* Calendar v0.3----------------------------------------------- */#Calendar {border:1px solid #222;margin:0px;}#Calendar caption {color:#fff}#Calendar caption a:link, #Calendar caption a:visited, #Calendar caption a:hover, #Calendar caption a:active {color:#777;text-decoration:none;}#Calendar caption today{font-weight:light;font-size:smaller;}#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{text-decoration:none;font-weight:bold;Text-decoration:underline;color: #fff;}#CalendarTable a:hover {text-decoration:none;}#CalendarTable table {border-collapse:collapse;padding:0px;border: 0px;}#CalendarTable table th {font-family:Arial;font-size:12px;padding: 1px;color:#777;margin: 0;}#CalendarTable table td {font-family:Arial;font-size:12px;height:25px;border: 1px solid #444;color:#777;text-align:center;padding: 1px;margin: 0;}#CalendarTable table td a {display: block;}#CalendarTable .Today {color: #fff;background: #444;}#CalendarTable .Today a {}#CalendarTable .Lastday {}#Calendar .act {color:#000;padding:4px;}

接下來，在 /head 之前插入

//function ArchiveCalendar() { this.PrevMonth = PrevMonth; this.NextMonth = NextMonth; this.GoToday = GoToday; this.refreshTable = refreshTable; this.YearMonth = YearMonth; this.Calendar = Calendar; this.archiveurl = archiveurl; this.week_label = new Array("一","二","三","四","五","六","日"); this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"); this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); this.today = new Date(); this.cur_day = new Date(); this.blogarchivename = new Array (); this.thisarchive = 0; this.base = '';}function archiveurl(idx) { url = this.base; url += this.blogarchivename[idx].slice(0, 4) + '_' + this.blogarchivename[idx].slice(4, 6) + '_' + this.blogarchivename[idx].slice(6) + '_archive.html'; return url;}function YearMonth(date_obj) { year = date_obj.getFullYear(); thisMonth = this.month_label[date_obj.getMonth()]; out = year+'-'+thisMonth; return out;}function Calendar(date_obj){ year = date_obj.getFullYear(); thisDay = this.today.getDate(); thisMonth = this.month_label[date_obj.getMonth()]; nDays = this.month_days[date_obj.getMonth()]; if (date_obj.getMonth() == 1 &&(((year % 4 == 0) && (year % 100 != 0)) (year % 400 == 0))) nDays = 29; IsitNow = date_obj; IsitNow.setDate(1); startDay = IsitNow.getDay() - 1; if (startDay '; out+=''; for (var index=0;index'+ this.week_label[index]+''; out+=''; thisarchive=0; while (thisarchive '; out+=' '; tab_col++; } var archiveday; for (index=1;index'; if (index==thisDay && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear()) { out+=''; if (thisarchive '+index+''; thisarchive++; } else out+=index; out+=''; } else { if (tab_col <>'; else out+=''; if (thisarchive '+index+''; thisarchive++; } else out+=index; out+=''; } if (tab_col==6) { out+=''; tab_col=0; } else tab_col++; } if (tab_col>0) { for (var si=0;si '; } out+=''; } out+=''; return out;}function PrevMonth() { thisMonth = this.cur_day.getMonth()-1; year = this.cur_day.getFullYear(); if (thisMonth11) { thisMonth = 0; year = year+1; } thisMonth = this.month_label[thisMonth]; this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01'); this.refreshTable();}function GoToday() { this.cur_day = new Date(); this.refreshTable();}function refreshTable() { document.getElementById('CalendarMonth').innerHTML = this.YearMonth(this.cur_day); document.getElementById('CalendarTable').innerHTML = this.Calendar(this.cur_day);}//]]>
//function ArchiveCalendar() { this.PrevMonth = PrevMonth; this.NextMonth = NextMonth; this.GoToday = GoToday; this.refreshTable = refreshTable; this.YearMonth = YearMonth; this.Calendar = Calendar; this.archiveurl = archiveurl; this.week_label = new Array("一","二","三","四","五","六","日"); this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"); this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); this.today = new Date(); this.cur_day = new Date(); this.blogarchivename = new Array (); this.thisarchive = 0; this.base = '';}function archiveurl(idx) { url = this.base; url += this.blogarchivename[idx].slice(0, 4) + '_' + this.blogarchivename[idx].slice(4, 6) + '_' + this.blogarchivename[idx].slice(6) + '_archive.html'; return url;}function YearMonth(date_obj) { year = date_obj.getFullYear(); thisMonth = this.month_label[date_obj.getMonth()]; out = year+'-'+thisMonth; return out;}function Calendar(date_obj){ year = date_obj.getFullYear(); thisDay = this.today.getDate(); thisMonth = this.month_label[date_obj.getMonth()]; nDays = this.month_days[date_obj.getMonth()]; if (date_obj.getMonth() == 1 &&(((year % 4 == 0) && (year % 100 != 0)) (year % 400 == 0))) nDays = 29; IsitNow = date_obj; IsitNow.setDate(1); startDay = IsitNow.getDay() - 1; if (startDay '; out+=''; for (var index=0;index'+ this.week_label[index]+''; out+=''; thisarchive=0; while (thisarchive '; out+=' '; tab_col++; } var archiveday; for (index=1;index'; if (index==thisDay && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear()) { out+=''; if (thisarchive '+index+''; thisarchive++; } else out+=index; out+=''; } else { if (tab_col <>'; else out+=''; if (thisarchive '+index+''; thisarchive++; } else out+=index; out+=''; } if (tab_col==6) { out+=''; tab_col=0; } else tab_col++; } if (tab_col>0) { for (var si=0;si '; } out+=''; } out+=''; return out;}function PrevMonth() { thisMonth = this.cur_day.getMonth()-1; year = this.cur_day.getFullYear(); if (thisMonth11) { thisMonth = 0; year = year+1; } thisMonth = this.month_label[thisMonth]; this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01'); this.refreshTable();}function GoToday() { this.cur_day = new Date(); this.refreshTable();}function refreshTable() { document.getElementById('CalendarMonth').innerHTML = this.YearMonth(this.cur_day); document.getElementById('CalendarTable').innerHTML = this.Calendar(this.cur_day);}//]]>


第三步驟，要展開"小裝置範本"找到下列的程式碼，
(請參照Abin的最後一個步驟，尋找和取代。我貼不出來ｓｏｒｒｙ)

這樣就好囉！可以去檢查一下，原本的Archive是不是已經變成月曆了:P

如果你要改六日的顏色，(來源文章Abin留言)

如果要修改"六"、"日"兩個字的顏色，六日兩列也是在最後兩列的話，請找到下面這一行：

out+=''+ this.week_label[index]+'';

把上面這行用下面六行取代：

{if (index < style="width:25px;">'+ this.week_label[index]+'';elseout+=''+ this.week_label[index]+'';}

試看看吧！

PS.上面步驟一和步驟二是看HolyBell's Blog:在Blogger中插入月曆，請以他的程式碼為主，

因為我的都縮在一起了，不知道會不會有影響，這我就不知道了XD~~~~你懂我意思吧:P