Blogger 提供讓你塞入 Sidebar 的文章匯總功能有三種介面，有階層（樹狀）、Flat 清單和下拉式選單，也可以調整排序和顯示的格式，不過，這樣總還是不夠。很多 BSP 提供的 Blog 都會有類似日曆的模組，除了會有類似萬年曆的功能，讓你知道「今夕是何夕」外，也可以透過這個日曆知道哪一天你發表過文章，透過點擊日期去知道當天你寫過什麼，所以這樣功能的日曆也叫做 "Archive Calendar"，提供另外一種文章依日期分類匯總的檢視方法。
只是塞一個日曆並不困難，到處都可以找到 Javascript 程式複製貼上，但是要整合 Blogger 的 Archive 功能就麻煩了，以下分幾個步驟來進行。首先，在你的 Sidebar 上面要至少有一個 "Blog 存檔" (Archive) 的網頁元素 (Element)，接下來去修改它的屬性，存檔頻率改成「每日」，勾選「先顯示最舊的文章」，樣式設成「Flat 清單」。因為 "Blog 存檔" 這個 Element 「看起來」只允許你存在一個，如果你想要有日曆而且原有的 Archive 也想保留，那就要去修改 HTML（不要展開小裝置範本），把下面這行複製一份，然後改一下 id（不重複就行），你就可以有兩個 "Blog 存檔"，把新增的那個 Element 改成日曆就行了。不過如果你不需要那麼多 Archive 模組，這個動作就不要做了。
<b:widget id='BlogArchive1' locked='false' title='ARCHIVED POSTS' type='BlogArchive'/>
第二個步驟，塞入定義給 Calendar 用的 CSS （放在 <head> 標籤內就行，就是定義樣版的區段裡，請依照個人樣版修改，這次修改算是大變動，記得先完整備份你的 Template，這次要展開整個範本進行修改）：
/* Archive Calendar Styles */
#Calendar {
margin: 0px;
}
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 0px;
}
#CalendarTable table th {
padding: 1px;
color: #777;
margin: 0;
}
#CalendarTable table td {
height: 25px;
color: #999;
text-align: center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: #777;
}
#CalendarTable .Today a {
color: #fff;
}
#CalendarTable .Weekend {
color: #997777;
}
#Calendar .act {
color: #fff;
padding: 4px;
}
第三個步驟，也是是重頭戲：要貼入一堆 Javascript 函示。（一樣是貼在 <head> 標籤裡，如果你之前也有 Hack 放過 Javascript，放在一起就好）
<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for generating Archive Calendar: ArchiveCalendar(), archiveurl(), YearMonth(), Calendar(), PrevMonth(), NextMonth(), function GoToday(), refreshTable() -->
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 < 0) startDay = 6;
var out='';
out+='<table>';
out+='<tr>';
for (var index=0;index<7;index++)
out+='<th style="width:25px;">'+ this.week_label[index]+'</th>';
out+='</tr>';
thisarchive=0;
while (thisarchive <= this.blogarchivename.length -1)
{
if(this.blogarchivename[thisarchive].slice(0,4) == year && this.blogarchivename[thisarchive].slice(4,6) == thisMonth)
break;
else
thisarchive++;
}
var tab_col=0;
for (index=0;index<startDay;index++) {
if (tab_col==0)
out+='<tr>';
out+='<td> </td>';
tab_col++;
}
var archiveday;
for (index=1;index<=nDays;index++) {
if (index<10) {
index_day = new Date(year+'/'+thisMonth+'/0'+index+' 00:01');
archiveday = '0' + index;
}
else {
index_day = new Date(year+'/'+thisMonth+'/'+index+' 00:01');
archiveday = index;
}
if (tab_col==0)
out+='<tr>';
if (index==thisDay && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear()) {
out+='<td class="Today">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday) {
out+='<a href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
out+=index;
out+='</td>';
}
else {
if (tab_col < 5)
out+='<td>';
else
out+='<td class="Weekend">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday) {
out+='<a href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
out+=index;
out+='</td>';
}
if (tab_col==6) {
out+='</tr>';
tab_col=0;
}
else
tab_col++;
}
if (tab_col>0) {
for (var si=0;si<(7-tab_col);si++) {
out+='<td> </td>';
}
out+='</tr>';
}
out+='</table>';
return out;
}
function PrevMonth() {
thisMonth = this.cur_day.getMonth()-1;
year = this.cur_day.getFullYear();
if (thisMonth<0) {
thisMonth = 11;
year = year-1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}
function NextMonth() {
thisMonth = this.cur_day.getMonth()+1;
year = this.cur_day.getFullYear();
if (thisMonth>11) {
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);
}
//]]>
</script>
最後一個步驟，要修改範本顯示的版面囉！找到下面這一段：（如果你有兩個 Archive，要確認你找到的是要改的那一個）
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
然後整個取代改成下面這一段：
<b:includable id='flat' var='data'>
<!-- Generate Archive Calendar -->
<center>
<table border='0' cellpadding='0' cellspacing='0' id='Calendar'>
<caption>
<a href='javascript:;' onclick='Calendar.PrevMonth();' title='Previous Month'><< </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onclick='Calendar.GoToday();' title='Back to Today'> <span id='CalendarMonth'/> </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onclick='Calendar.NextMonth();' title='Next Month'> >></a>
</caption>
<tr>
<td class='act' id='CalendarTable'> </td>
</tr>
</table>
<script type='text/javascript'>
Calendar = new ArchiveCalendar();
Calendar.base = '你的 Blog 網址';
var offset = Calendar.base.length;
<b:loop values='data:data' var='i'>
archUrl = '<data:i.url/>'.slice(offset);
Calendar.blogarchivename.push(archUrl.slice(0,4) + archUrl.slice(5,7) + archUrl.slice(8,10));
</b:loop>
Calendar.refreshTable();
</script>
</center>
</b:includable>
其中，紅色的網址記得要改成自己的喔！範本存檔，然後預覽看看，如果日曆有出來，就可以存檔收工囉！其實原理和標籤雲 (Label Cloud) 類似，利用 Javascript 搭配 Template 提供的資料（Daily Archive），將 Element 的樣式動態改變，變成想要的樣子，就是這個多功能的日曆囉！再嚴謹一點，最後一段可以加入 <noscript> 的判斷，套用原來那一段，如果使用者的瀏覽器不支援 Javascript （或是關掉），那麼Archive 的功能也還是存在能夠使用～（這裡懶得改了）
參考文章：
為 Blogger Beta 加上日曆
備註：
實際掛上這個模組，又看了原始碼以後，發現如果 Blog 的文章很多，搞 Daily Archive 文章會很多很慢，尤其當 Blog 成立越久，為了依照日期填入日曆的「每一天」的存檔，會增加首頁載入的時間，發表天數越長越嚴重！我還蠻喜歡這個日曆的，看看要不要改個 Monthly Archive 的版本，效能應該會比較好才是～
修改：
根據網友意見，我把日曆的第一天從原來的禮拜天改成禮拜一，也比較符合自己的習慣，另外日曆週末的部分也稍稍改變顏色(class: weekend)，用來標示，也可以自行修改樣式。
(2007/04/02) 修正 bug，如果有其他 style 的問題，請看看下面的意見和回覆的內容能不能解決。
回應: 94
想請教您，可否用同樣的月曆（版型）與Google Calendar結合在一起？意思是說，我在GCalendar輸入的公開行程，可以與您設計的這個樣式結合嗎？謝謝。
應該可以吧，只要用 Javascript 去 parse Google Calendar 提供的 XML 資料(Google Calendar 設定要改成分享給所有人)，依日期逐項塞入，就有同樣的效果。不過門檻就在改動從外部抓取資料來源。
我印象中，你如果想把 Google Calendar 加入 Blogger 首頁，其實不用那麼麻煩用什麼 Hack，Google Calendar 有提供插入網頁用的程式碼，在設定->日曆，先點選日曆分享給所有人，然後在日曆詳細資料那邊點選日曆的 HTML 網址，他會跳出另外一個視窗讓你更改樣式，並且在下面產生 iframe 的程式碼。
接下來在 Blogger 裡面網頁元素新增一個 HTML/Javascript 模組，把 iframe 的程式碼貼進去，儲存，這樣在你的 Blogger 首頁就嵌入了一個功能完整的 Google Calendar 了！不用改動 Blogger 樣版範本，就有你要的效果囉！只不過，外觀樣式上還是有一些限制，這一點除非自己寫程式，不然很難克服。
看起來超複雜，實在不適合我這個電腦呆子。還是謝謝你的回覆。（我知道Google Calendar原本的那個功能，不美觀就是了...）
Hello It watches east text I have translated it by means of google. The question is that of Javascript and the calendar does not begin per Sunday and where I live begins per Monday. You would know like modifying script?
So do I, srwolfman. Ok, I fixed the Javascript and made the calendar first day started from Monday. You just have to modify two places:
1. The sequence of week_label, the line is like "this.week_label = new Array(...)" (There are chinese in it)
2. Startday minus 1, the line is "startDay = IsitNow.getDay();", you have to fix to "startDay = IsitNow.getDay() - 1;"
By the way, I also hightlighted the color of weekend, add an additional style named "Weekend", and all codes also updated in the post. You could also help me to test it. :)
Hi
Perfect, thanks you.
雖然不错，但美中不足的是當鼠標指向日曆中有文章的那一天時，沒有浮現文章名稱
我想把第一天設成禮拜天，
請問要怎麼改？
謝謝！
我上面的回應有提到修改的地方（不過是英文的），原本第一天是禮拜天我改成了禮拜一。要更改日曆回第一天是禮天，有兩個地方要改：
1. 更改 week_label，這是顯示禮拜一、二、三...的標籤，這一行像是："this.week_label = new Array(...)"，把 "日" 移到第一個。(在 function ArchiveCalendar() 裡面)
2. 更改啟始日期，原來範例裡是 "StartDay = IsitNow.getDay() - 1;"，把 "- 1" 拿掉就可以了。(在 function Calendar() 裡面)
謝謝！我改好了
如果想要當鼠標停在日曆上有文章的日期上，就顯現出該文章名稱，就像 wordpress 那樣，請問應該如何實現呢？
Archive Calendar 是修改 Blogger 「每日存檔」功能得來的，所以日曆上「每一天」的文章顯示，都是以 Archive 的模式顯示，這樣也才應付「一天有多篇文章」的狀況。
它並沒有辦法像 Wordpress 的 Plugin 一樣，能夠直接存取資料庫，查詢所有日期的文章標題再塞入日曆裡面，我查過這個 Hack 能夠提供的資料，只能提示「一天有幾篇文章」，並沒有辦法提示「每篇文章的標題」，既然取不出標題的資料，自然就沒辦法顯示當日文章的標題了。
Blogger 的 Hack 只能針對 Blogger 提供的資料來做調配，不可能讓你直接讀取資料庫為所欲為地表現需要的功能，所以也才叫做 Hack，和 Wordpress 套用的 Plugin 方式是完全不一樣的。
我已成功的將日曆加入我新的Blog，謝謝您!!
但是日期與星期無法對應，例如今天是4月2日(星期一)，應放在星期一的位置，但它是擺在星期二的位置,我看您的網頁的日曆也是放在星期二，請問要如何修改才會是正確的對應。
另有二個問題請教您：
1.如何將"六"與"日"這二個字的顏色變更為紅色。
2.我照您的方式將"日"改在第一列，其"六"與"日"的對應日期顏色應為紅色，但是紅色的日期還是維持在最後二列，我應如何修改?
謝謝您!!
謝謝回報，日曆錯誤的問題已經修正。一併回答你的問題：
1. 如果要修改"六"、"日"兩個字的顏色，六日兩列也是在最後兩列的話，請找到下面這一行：
out+='<th style="width:25px;">'+ this.week_label[index]+'</th>';
把上面這行用下面六行取代：
{
if (index < 5)
out+='<th style="width:25px;">'+ this.week_label[index]+'</th>';
else
out+='<th style="width:25px;" class="Weekend">'+ this.week_label[index]+'</th>';
}
如果第一列是禮拜日，則把 if (index < 5) 改成 if (index > 0 && index < 6)
2. 如果第一列是禮拜日，請找到這一行：if (tab_col < 5)，改成 if (tab_col > 0 && tab_col < 6) 就可以把第一和最後一列的日期變色了。
謝謝您迅速的回覆我的問題，依據您教的方式，我已經變更成功了。
再次感謝您的協助 !!
Have a good day !!
hi,如果不介意, 此文是否可以借轉? 謝謝~
Maggieblack, 歡迎引用文章的內容..
你好，我有一个问题想请教您。按照你的办法，我同样整合了日历在自己的版面上。但是我发现，日历上数字的大小是不一样的。比如说，0 1 2这三个数字比较小，从3到9数字偏大。这是为什么呢？
To Z: 您日曆上數字大小不一樣，問題是你整個 Blog 選定的預設字型搞的鬼。你可以試試看，如果你的 Blog 文章裡也有 0, 1, 2, 3 ..一樣是 0, 1, 2 會比較小，不只是日曆裡會這樣，是你整個站都一樣。關鍵是因為你選用了 Georgia 這個字型。解決辦法，尋找你的樣版，不要用 Georgia 字體。
如果你只想改你日曆裡套用的字型，也可以加入類似下面這一段 CSS 到你的樣版裡：
#CalendarTable {
font:normal normal 100% Arial,Verdana,Sans-serif;
}
強迫日曆裡用 Arial 這個字型，一樣可以解決您的問題。
万分感谢ABIN的回答！
abin大大,請問:
我在blogger setting的存檔方面，選了（每日計）之後，兩個archives就同樣變了(每日計)
可不可以用兩個archives:
一個是日曆方式(每日計),
另一個是以月份(每月)的?
謝謝~
To anders: 你的問題我驗證過了，沒辦法在一個頁面放入兩個 Archives 喔，因為有些存檔處裡的參數並不是保留在樣版上面，而是系統參數保留在 Blogger 那邊，所以即使你搞出兩個 Archives，這兩個還是共用同一份參數，所以你只能用 Daily 或是 Monthly。
這一點也困擾我一陣子了。
謝謝abin~
超快的回覆啊~
多多指教
在此先感謝你的教學!!找了許久!!終於讓我找到了
= =~~~
在忙了一個夜晚!!
依樣畫葫蘆，改這個改那個!
到早上終於成功了
只過我有以下幾個問題希望不會為你帶來麻煩!!
如果覺得麻煩不回覆的話可以請給我一個方向嗎??
謝謝!!我很感動你的教學先!!
第1：原本的Archive(為a)
用程式碼新增出來的Archive(為b)
照理說日曆顯示成功的話應該是在b-Archive才對吧!!為什麼我的跑到a-Archive呢?
第2：我是ff瀏覽器，完成後我點日曆上的日期卻無法連結我的文章!我在懷疑是不是因為我的ff沒有裝java的plug in或是我程式碼的地方有錯誤!!
以上就這些問題!!希望不會為你帶來麻煩!!謝謝!!
abin大大!!
第2個問題我解決了!!
我想應該是在我修改程式碼的時候有問題!
於是我又重新改一次就ok了!!
只是問題1的狀況是正常的嗎??
To Cool GEN's BABA, 之前我有提到喔，Blogger 的 Archive 雖然可以用程式的方式增加多個，但原則上系統只允許你用一個，而有部分設定其實是在 Blogger 伺服器上，並不是在樣版裡。
因此，即使你有兩個 Archive (A & B)，日曆顯示依舊只會用其中一個，而且，是系統認得的那一個（應該是第一個: A）。
因此，你的問題一狀況是正常的，保險起見，您還是只用一個 Archive 比較好。
您真是太厲害啦.
謝謝您啊,謝謝.
我終於有日曆了.
真是太感激您了,我試過好多方法了.
我的網誌 http://zeki-621.blogspot.com/
為什麼日曆的顏色變的好怪
"日" "六"的顏色有變
但是下面數字的顏色變成不太對了
可以幫我看看哪裡沒改好嗎?
To 小日本，請把你自己的樣版程式碼這一行：
if (tab_col > 5)
改成
if (tab_col > 6 && tab_col < 0)
就可以了。
結果我自己修好了
因為我一直找不到你說的
if (tab_col > 5)
不過還是謝謝啦~
不好意思....想請教一下....我照個這些步驟去做以後日曆出來了、也把星期日改成第一列了(六日的顏色也改到正確的位置了)...但是我突然發現一個問題，就是我看到別人的BLOG裡面在他有PO的文章的日期處有連結可以按...但是我的部分卻沒辦法...請醒問一下我是哪個步驟出了問題...
我的BLOG是http://suroan.blogspot.com/
感恩...
照您的說明作了
結果卻出現亂碼
我的blog
http://xwasos.blogspot.com/
是不是還要注意什麼呢?
還有 我的日期上也沒有link
有link了 原來是
先顯示最舊的文章
這選項沒有勾
不過網頁上方的亂碼
還有日期號碼沒有顏色要怎麼處理呢?
To roan:
你的問題可能和 monster 一開始碰到一樣，請注意我文章第二段寫的，檢查一下：修改它的屬性，存檔頻率改成「每日」，勾選「先顯示最舊的文章」，樣式設成「Flat 清單」。
To monster: 你上面的「亂碼」，是 CSS 的樣式定義，你貼錯地方了：「在 <head> 標籤內，定義樣版的區段裡」，你有貼到 head 的標籤內，但沒有在樣版區段裡，樣版區段指的是 <style> 標籤裡面，定義 CSS 的部分，所以只要把你說的「亂碼」，剪貼到 <style .. > 標籤後面，就可以同時解決顏色和亂碼的問題。
網頁外觀中的無效變數聲明： 您可以使用變數，但不能定義它。 輸入： sidebarcolor
@@我找不到style這標籤
只好貼到我的標籤雲的上方
結果出現上述的訊息。
已改好
原來是每個樣板使用的css變數不同
感謝您的指導
有個問題 雖然日曆顯現了但是點日期卻沒有任何文章聯結 我BLOG已經有五六篇文章了且紅字部分我有改成自己BLOG位置了 想請問是哪裡出錯了
啊~找到問題癥結了XD,以為網址有改,沒想到漏掉了
反正問題已解決^^"
作者已經移除這則留言。
謝謝你，我引用了此功能到我文章中^__^
我按照指示裝了archive calendar,但是archive calendar卻無法連結到其他月份及其他文章,請問如何修改?
share-is-happy.blogspot.com
我好像弄錯了,sorry
不好意思，我無法加上日曆耶...
照著教學做後，按預覽時，只在bloog最上方出現第二個步驟的程式碼...
二、三步驟的程式碼，我是貼在＜head＞的下方。
有看到您的回應中，第三步驟是貼在＜style＞中，但是我按搜尋找不到＜style＞ ...囧
To Idle:
第二個步驟裡的東西都是 CSS 的 style 定義碼，我的意思是請新增到 <head> 後面、原有 Style 定義區段的裡面。我看了你的程式碼，你也有套用樣版，而且有 ID，所以當然你搜尋不到 <style>，請搜尋 <style （沒有右邊的括號，因為裡面還有定義其他參數），放到類似的 CSS 定義區段裡面。
ya!!!
終於成功了!
試著找＜style也找不到
後來我是在觀察一下第二步驟的程式碼
然後在找類似的，丟在一起，就ok了^^
謝謝大大了 ~~
不好意思，又有問題了 囧!
那個日曆不會顯示我以前發過的文章耶
就是沒有變成有連結的藍字....
是我有什麼地方沒設到嗎??
還是說弄好日曆後，文章都要重發一次?!
To Idle:
很遺憾，是的。因為該日曆是用「Daily Archive」，如果你之前是用每月匯總，那麼那個日曆用的連結，應該只會有當月的一號，不會有每一天的。
不過是不是要「每一篇」都重發我不確定，或許，當你改成 Daily Archive 之後，該月份只要有一篇文章重發，每篇文章的 Archive 連結就會被做出來，這可能要實際試試看才知道。（也就是當月重發一次就好了，不用每篇文章都重發）
不過我一加入dialy archive後，就直接設成跟這篇文章的設定一樣耶...
加入這個之前是有一些文章啦...
但後來有在發一些文章。但沒連結
還有，重發文章，是指把文章內容copy後重新發佈，然後刪掉原本的。
還是只要按「編輯文章」後，在按發佈呢?
如果是後者的話，我到是有試過，但一樣沒連結 囧"
不好意思，問題多了點 >"<
我後來有在開一個新的blog
直接加入日曆後，發佈文章，有正常出現連結，後來我在新增一些blogger hack後，弄的還滿滿意的，打算把原blog的文章轉過去，才轉第一篇，日曆文章又沒連結了...
新的blog>http://idlelifer.blogspot.com/
請問會是有什麼衝突到嗎><
以下是我有新增的blogger hack
http://windclara.googlepages.com/test.htm
麻煩大大抽空看一下><"
或是，我加入大大為共同作者，有空時幫我注意一下是不是範本有什麼地方有錯，這樣ok嗎??
如果這樣會防礙到大大太多時間的話，那就回應告訴我沒時間幫忙...
，至少讓我每天回家時，不會有期待落空的感覺 囧"
實在是很喜歡這個日曆的說....><
To idle:
才轉第一篇，日曆文章又沒連結了... -> 我看你新的 Blog，看起來是正常的啊？是問題解決了，還是哪裡還不正常？
咦
當時轉移時沒有的呀
怎麼後來出現了@@"
難道會比較慢顯現嗎...0.0
不過至少有了
不管了 ~~
總之，謝謝大大了 ^^
您提供標籤雲的作法 我成功了！ 可是要作日曆時，卻出現「網頁外觀中的無效變數聲明： 您可以使用變數，但不能定義它。 輸入： sidebarcolor」，是哪裡發生問題呢？
To ducklynn:
變數 sidebarcolor，是 Blogger 內建、用來定義樣式的預設變數之一，我的樣板有些顏色為求一致，顏色代碼不一定都用像 #660000 這樣的數字，而是一開始定義該變數的值，要用到那個顏色就直接引用變數。
我的樣板裡有宣告，因此樣式會引用，您會發生錯誤主要是您的樣版並沒有「宣告」該預設變數，因此要引用的時候發生錯誤。
解決這個問題很簡單，你就把那個變數值改成你要的樣式顏色代碼（像是 color: #660000），或是在樣式前面定義宣告，問題就解決了。
請問Abin:我完全都照你的教學弄了一個月曆，我的問題：在月曆第一排應該是有顯示一二三四五六日，但是我的只有六日，其他的都不見了，我不知道該怎麼修改，請你幫幫忙？！！（感激不盡）
我的部落格：
http://megmagicworld.blogspot.com/
To megan:
完全都照我的教學弄，但你要知道其所以然啊，不是光貼我的範例到你的範本裡，就一定會照你想像那樣顯示。我的每個 Hack 都有個但書，就是有的會依照每個人的樣板和樣式不同而有不同效果。首先，你的日曆是正常的，第一排之所以「看不到」，那是因為你模板用的顏色所致（你的模板第一行是「黑色」，去選擇反白，就看得到了）。
請看你原始碼：#CalendarTable table th { 這一段裡面的定義，根據範例你應該指到的顏色是 color: $sidebarcolor; ，$sidebarcolor 是模板顏色變數，在我的樣板裡是白色，但你樣板裡定義的卻是黑色，字的顏色和背景一樣，所以看不到。
解決辦法很簡單，你自己定義那個顏色（例如白色，你就改成 color: #ffffff; ），這樣就看得見了。
謝謝Abin，經過你清楚的解釋，我完全瞭解了！謝謝你不嫌棄我的問題；因為當時我弄好了月曆時，看到出了點小問題，我就慌了手腳了不知道該怎麼辦，所以沒有經過思考就先請教你了！不管怎麼樣，真的非常謝謝你！
abin站長您好，不好意思又來叨擾...QQ
之前照著這篇文章的指示還有一些回應的解說在自己的blog做好了月曆，一切完好，不過後來我陸續改了其他的部分後，今天突然發現日曆的顏色配置都消失了，甚至第一行星期數字跟下面的日期的對齊也有點跑掉了，但是我完全沒有修改日曆的css語法...用我另一個blog的沒有問題日曆語法來貼，問題還是存在，不知道是不是我在安裝其他功能的時候，不小心改錯了什麼...印象中沒有在碰觸任何跟日曆有關的語法...因為完全不到該從和處理，所以只好向站長求救了，也許abin站長會知道可能哪裡出了問題？QQ
因為我自己改了一大堆有的沒的，實在不敢奢望站長可以從我那堆亂七八糟的東西看出點端倪，如果可以給予任何建議的話，都非常感激不盡！
我的blog:
http://ffrxd.blogspot.com/
這是我自己瞎子摸象改出來的範本...如果有需要的話...=////////=
http://clumsy.fumiko.googlepages.com/template-2344932346576001252.xml
再次謝謝您！
To fumiko:
這種狀況是因為 CSS 樣式宣告重複，導致後來宣告的 CSS （可能是你其他裝的模組需要用的）去覆蓋掉原來日曆內關於顏色和對齊的樣式定義，影響的只有外觀，和功能無關。
你自己也清楚是因為套用太多模組和功能所致，我不可能一個個幫你 debug（我看了一下，實在太複雜啦），根本的方法是找出那個你最後加裝的功能（難搞是因為有些加裝的功能樣式還是外掛的 CSS 檔，很難追），用其他宣告方式去改那些模組內像是 table, td 這些個標籤的樣式，以後比較不會出現類似的問題（難度比較高，這也是我愛用自己寫的 hack，不愛去外連別人模組的原因）。
救急的辦法呢，強制在日曆標籤前更改樣式（這樣就不受後來定義的影響），舉個例子，像對齊的問題你可以把 out+='<table>'; 這一行，改成 out+='<table style="text-align:center;">'; 日曆的日期就可以解決了，但是顏色，你可能要一個一個地找出來改了（一樣手動指定顏色樣式）。
玩 Hack 就要有類似的覺悟，很多功能的寫法很不負責，像是無用的垃圾程式碼一堆、沒事用連結的方式外掛樣或宣告函式，套用後可能會影響別人的樣式、拖慢速度，嚴重一點還不能修復（所以要勤做備份），所以在使用這些模組前都要三思。
謝謝abin站長快速的回應，我想我真的是弄的一團混亂，最後乾脆全部從頭來過了，幸好我想要的「視覺效果」都有出現...像我這種程式小白果然是太貪心又太懶惰了...^^|||不知道藏了多少亂七八糟的語法在範本裡，也不太清楚怎麼刪減...QQ
總之真的非常感謝abin站長的教學，收穫良多！^^
此外參照abin的「在版面格式中放入小圖示」以及「調整 Post footer 的回應連結」的修改步驟，改成我想要的外觀，不過不知道為什麼用IE開啟的時候，「回應：」跟「張貼意見」前面的圖片沒有對齊...不知道問題出在哪裡，我兩個圖片的css定義明明是一樣的啊QQ不知道有沒有解決的辦法？還是說IE真的太爛了...= =|||
To fumiko:
對齊的問題在 IE 一直讓人很頭痛，有時候不管怎麼調看起來就是差一個 pixel。除了一直轉換語法、換別的 CSS，看能不能找出讓了個瀏覽器看起來「差不多」一樣，目前也沒有根絕的辦法了。
不好意思，想請教一下，
實在試不出第二步驟的CSS要放哪，
可不可以麻煩版主幫我看一下，感謝。
我的Blogger
我的模板
To clare:
第二個步驟放的 CSS 代碼，是關於樣式的宣告，只要是放在 <head> </head> 兩個標籤的中間就可以了，只要是放在這裡面，位置就是正確的。再者，CSS 只決定了「外觀樣式」，和「功能」沒關係，我不知道也看不出來，你所謂「試不出來」是外觀不對還是功能沒出來。
另外，你模板的連結不能使用，Blog 原始碼裡也沒有套用日曆功能的「痕跡」，要人家幫忙看好歹也要有「屍體」吧？
感謝版主超快速的回應^^
不好意思，小弟再放一次我的模板，
另外網也改成錯誤的狀態了，
因為看到前面有大大說網頁上方出現亂碼，
我想我的情況也是類似，我也找不到<style> 標籤，所以第2,3步驟我都是放在</head>前，感謝版主解答了^^
模板
To clare:
我知道原因了，之前的回應中我也有提到，這還是樣板不同導致的問題。我回應 megan 的留言中有講到，CSS 樣板裡有用到變數 $sidebarcolor 之類的，「並不是每種樣板都有這個變數」（像您樣板裡就沒有），所以如果你只是剪貼沒有修改，存檔時就會發生錯誤。這個問題在樣板不同又沒修正時就會碰到，好吧，我順手修改我文章的「範例」、把這種變數換掉（$sidebarcolor; 變成 #777;），讀者們「照貼」時就比較不會有這個狀況了。
另外，我看你的樣板，你那段 CSS 不只是應該放在 <head> 標籤中間，而還要是在 <b:skin> 裡面（這樣才不用找 style 標籤），你可以再試試看。
謝謝版大耐心的幫我解答，
但是小弟還是修改不成功^^"，
放在<b:skin>跟放在body{ 裡面都試過，
"Blog 存檔"的樣式還是沒有變成日曆，
如果版大有空，不嫌棄的話麻煩幫我看看^^
感謝了。
To clare:
我在第一次回應時就說到：CSS 只決定了「外觀樣式」，和「功能」沒關係。"Blog 存檔"的沒有變成日曆，不是樣式的問題，是功能根本沒有被觸發。
我看了你的 Blog，我覺得是你沒有去調整"Blog 存檔"所致。請仔細看我文章的第二段：
「首先，在你的 Sidebar 上面要至少有一個 "Blog 存檔" (Archive) 的網頁元素 (Element)，接下來去修改它的屬性，存檔頻率改成「每日」，勾選「先顯示最舊的文章」，樣式設成「Flat 清單」。」
你的 Blog 存檔屬性顯示的是「階層」，你並沒有去改成「Flat 清單」吧！請到「版面配置」、「網頁元素」裡，選擇你 ARCHIVED POSTS 這個元素旁的「編輯」，先去改你的屬性吧！
太感謝版大的解答了，
真是不好意思，一切都是小弟自己眼拙，
在版大的熱心指導下終於弄出日曆啦^^
再次感謝版大!!
謝謝你的文章！！成功修改了！^^
abin大你好,請問你說的”Sidebar 上面要至少有一個 "Blog 存檔" (Archive) 的網頁元素”該怎麼做呢?我不是很懂,我是blogger新手,可以向你請教嗎?感謝^^
To puppy:
登入 Blogger 的管理介面，版面配置->網頁元素裡面，在你想要放日曆、或是其他模組的區域（通常是左邊或右邊的區段、試樣板不同位置也不一樣，這就是 Sidebar），要至少新增一個「網頁存檔」網頁元素。
在搞 Blog Hack 之前，請先熟悉 Blogger 本身就提供的設定和管理介面，比較聽得懂別人在說什麼、也才能找出自己需要得畫面和功能。
abin大大你好,謝謝你的指導,我想我是知道那些功能,但是卻還不熟悉名稱,大大的指教讓我學到了東西,還請見諒我的打擾^^
Abin您好
載我樣化葫蘆calendar的時候，找不到b: includable 這一段，所以我貼在body的前面, 然而， 這樣預覽的時候會出現:
解譯網誌範本時發生錯誤
Unknown runtime binding: includable in widget
---------
請問是什麼問題? 我的網誌是http://shulammite-diaries.blogspot.com/
請不吝指教，謝謝您。
To shulammite:
「找不到 b:includable 這一段」？那你就不應該進行接下來的動作，因為這個 Hack 就是在修改「Blogger」專用的標籤和語法，亂貼在 Body 後面當然是錯的。
請先確定兩件事情，第一，你有加入「網站存檔」的網頁元素，第二，確定你在編輯的時候，有打開原始碼、而且有展開完整的範本（展開小裝置範本），以上一定就會有那一段、或類似的程式碼。
Dear Abin,
原來我的問題是沒有展開小範本，雖然我還不清楚為什麼有沒有小範本的原始碼會不一樣，不過總算是試成功了。謝謝您的指教，我會慢慢的學習的。 謝謝您
To shulammite:
「展開小裝置範本」意謂要一併修改那些 Blogger 內建的模組，在範本檔案裡才會一併顯示那些模組的設定程式碼。
這個日曆模組是透過修改 Blogger 內建的「網頁存檔」模組，將顯示的方式改成日曆模式，所以一定要展開小裝置的範本，才能看到要修改的程式區段。
請問如果要改變有文章的那天在日曆上的顏色，要怎麼改呢?
我試改了ccs 程式碼裡面所有的顏色
，怎麼動show出來都還是白色有底線..
To plumpbear:
「白色有底線」？那是因為有文章的日期，有「連結」的關係，你單純改字 CSS 顏色是不會有效果的。
因此你要改的是，另外去定義「連結」的樣式，像是這樣：
a:link {
color: #99aadd;
text-decoration: none;
}
「連結」才會沒有底線、不會是白色。
成功了!謝謝您的說明 :)
hi Abin, 我參考了你這個hack，做了一些修改，現在已不需要任何的 archive element，是利用 google 的 JSON feed
http://lvchen.blogspot.com/2008/07/blog-post_11.html
感謝您這篇文章給我一個好的開始。
To LVCHEN:
太強了！我剛剛試用了一下，您的作法正是我以前做這個 Hack 想達到的效果，可以不要用靜態的 archive、動態隨月抓取切換，有機會我也要來研究改版一下～
感謝您提供的資訊。
版主您好,我是剛入門blogger的新手,由於你的文章對我很受用,所以我在文章中有連到這篇教學,希望你能讓我做個連結,讓更多網友能看到這篇教學,感謝~~
To EATING:
連結轉載歡迎，記得標明引用的出處就好了～
版主請問一下,日曆上方<<2008-09>>,如果我想把他跟日期放在同一行而不是下一行才顯示日期,應該在那個部份做修改呢?還有"<<"這個部份想改掉應該在那裡修改呢?!我找好久啊 >< , 謝謝~~~
To 小筑:
我看了你的 Blog，你是想調整成 Timeline 形式的日曆，所以才會那個年月切換的部份移到同一行。樣式的問題很複雜，因為我是 Table 標籤來做，因此用了 Caption 和 TR 來做每行的分隔，只要有這幾個標籤，標題和日期就沒辦法在同一行。除非完全捨棄 Table 的格式、也沒有 BR, P 等換行分段標籤，才有可能在同一行（就是、要大改樣式和程式碼）。
至於第二個問題比較好解決，那個向左向右的雙箭頭，在程式碼裡用的是代碼（因為那個符號是保留字元），那兩個符號是在 title='Previous Month' 和 title='Next Month'這兩句的後面，你可以改成圖片或其他文字。
本來以為取消換行就可以了,原來如此啊,還是謝謝您的幫忙,哈^^",我會再試看看的,謝謝哩..
Abin版主可否幫我看一下我的blog的月曆為何無法顯示出超連結
只有單純的月曆而已，因為之前使用您的BlackCat2.5有改成功
但現在這個只能當月曆，沒有archive的功能
請您幫忙一下，感謝
To Miles2fly:
我看的時候你的月曆都有超連結啊 (Daily Archive)，不大懂你的意思。另外，我沒有寫過什麼「BlackCat2.5」，你應該是有地方搞錯了。
你好
不好意思想請教一下如何讓游標到有文章的日期上會顯示出標題呢?
我的是都會出現 日期:(沒有結果)
可是看你的好像都會出現文章的標題
是我哪裡弄錯了嗎??
how to change color of dates if there is posts on that day? your default blue color is not obvious, I want to change it to yellow, how to do it? Thanks.
Mars
To Mars:
Blue is not my default color for hyperlinks, that depends the default hyperlink color definition of blog template.
If you really want to change the day color with posts (hyperlink), you can modify the CSS definition of hyperlink in calendar. For example, search the section as below:
#CalendarTable table td a {
display: block;
}
Add your "yellow" color definition:
#CalendarTable table td a {
display: block;
color: yellow;
}
That's it.
請教一下，我成功的套用了大大提供的語法
不過我想把年月的標題改一下
<< 2009-10 >> 『這是預設的』
我想把月份改成『Jan Feb 這種類型的』
然後將整個標題寫成
《 Jan. 2009 》
《 Sept. 2009 》
不知道怎麽改標題的格式？
我發現一個問題
我綁定blogger的網域之後
日期的文章連結會消失耶～ 該怎么解决？
To iLYuSha:
因為這個日曆的年月標題是用迴圈和數字計算出來的，你提到的標題是根據月份到變數 this.month_label 裡提取的，所以要改顯示，可以直接改 YearMonth() 函式裡 thisMonth 的內容。
其次，你綁定網域後文章連結的問題，請注意上面程式碼裡 Calendar.base 後面「紅色」的地方要一併改。
張貼留言
歡迎留言或發表意見，不過要理性、不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔～
發問相關的禮貌和規矩請先參考這篇文章，不當留言、和本文無關的回應可能會被直接刪除或無視喔！