2007年11月2日

新增功能: 放月曆(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的最後一個步驟,尋找和取代。我貼不出來sorry)

這樣就好囉!可以去檢查一下,原本的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

0 意見:

在你按右鍵之前..

Creative Commons License
[自由分享/姓名標示/非商業性/禁止改作/CC 2.5 台灣]
歡迎轉載分享並附上來源出處,請勿做任何商業用途使用,謝謝