幫Blogger裝上月曆

在這裡裝上日曆這件事我弄了好久，總覺得我好笨；不過還是成功的弄上來了。超有成就感的！
這些方法是參考網路上許多人的文章才弄出來的。
簡略的說明如下
共分成三個步驟

首先在範本中放置CSS的地方 放入以下CSS：

#Calendar {
  margin: 0px;
}
#Calendar .act {
  color: #fff;
  padding: 4px;
}
#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;
}

接著在 head 標記結束前，插入下列 javascript 的程式碼：

&ltscript type='text/javascript'>
//<![CDATA[
<!-- Script functions for generating Feed Calendar: generateCalendar(), collectPost(), BrowsePrev(), BrowseNext(), BackToday() -->
var baseURL = '';
var currentDay = new Date();
var today = new Date();
var monthLabels = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var weekLabels = new Array('一','二','三','四','五','六','日');

function generateCalendar(){
var thisYear = currentDay.getFullYear();
var thisMonth = monthLabels[currentDay.getMonth()];
var thisDay = today.getDate();
var nDays = monthDays[currentDay.getMonth()];
if (currentDay.getMonth() == 1 &&(((thisYear % 4 == 0) && (thisYear % 100 != 0)) || (thisYear % 400 == 0)))
nDays = 29;
var IsitNow = currentDay;
IsitNow.setDate(1);
var startDay = IsitNow.getDay() - 1;
if (startDay < 0)
startDay = 6;
var sCalendarCode = '&lttable>&lttr>';
for (var index=0;index&lt7;index++)
sCalendarCode+='&ltth style="width:25px;">'+ weekLabels[index]+'</th>';
sCalendarCode+='</tr>';
var nTableCol=0;
for (index=0;index&ltstartDay;index++) {
if (nTableCol == 0)
sCalendarCode += '&lttr>';
sCalendarCode+='&lttd>&ampnbsp;</td>';
nTableCol++;
}
for (index=1;index<=nDays;index++) {
if (nTableCol==0)
sCalendarCode+='&lttr>';
if (index==thisDay && today.getMonth()==currentDay.getMonth() && today.getFullYear()==currentDay.getFullYear())
sCalendarCode+='&lttd id="Day'+index+'" class="Today">';
else {
if (nTableCol < 5)
sCalendarCode+='&lttd id="Day'+index+'">';
else
sCalendarCode+='&lttd id="Day'+index+'" class="Weekend">';
}
sCalendarCode+=index;
sCalendarCode+='</td>';

if (nTableCol==6) {
sCalendarCode+='</tr>';
nTableCol=0;
}
else
nTableCol++;
}
if (nTableCol&gt0) {
for (index=0;index<(7-nTableCol);index++) {
sCalendarCode+='&lttd>&ampnbsp;</td>';
}
sCalendarCode+='</tr>';
}
sCalendarCode+='</table>';
document.getElementById('CalendarTable').innerHTML = sCalendarCode;

var sFeedURL = baseURL + '/feeds/posts/summary?orderby=published&amppublished-min='+thisYear+'-'+thisMonth+'-01T00:00:00&amppublished-max='+thisYear+'-'+thisMonth+'-31T23:59:59&ampmax-results=50&ampalt=json-in-script&ampcallback=collectPost';
var script = document.createElement('script');
document.getElementById('CalendarCaption').innerHTML = '&ltspan class="loading"&gtLoading &ltblink>...</blink></span>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function collectPost(json) {
document.getElementById('CalendarCaption').innerHTML = currentDay.getFullYear()+'-'+monthLabels[currentDay.getMonth()];
var entries = json.feed.entry;
if (entries == undefined)
return;
var nDay = 0, nCount = 0, nActual = 0;
var posts = new Array();
for (var i = 0, post; post = entries[i]; i++) {
nDay = parseInt(post.published.$t.substr(8,2),10);
if (i&gt0&&ampnDay==parseInt(entries[i-1].published.$t.substr(8,2),10)) {
var actualDay = post.published.$t.substr(0,10);
var actualTimezone = post.published.$t.substr(23,6);;
posts[nActual-1][1] = posts[nActual-1][1]+', '+post.title.$t;
posts[nActual-1][2] = baseURL +'/search?updated-min='+actualDay+'T00%3A00%3A00'+encodeURIComponent(actualTimezone)+'&ampupdated-max='+actualDay+'T23%3A59%3A59'+encodeURIComponent(actualTimezone);
} else {
posts[nActual] = new Array(3);
posts[nActual][0] = nDay;
posts[nActual][1] = post.title.$t;
var j = 0;
while (j < post.link.length && post.link[j].rel != "alternate")
j++;
posts[nActual][2] = post.link[j].href;
nActual++;
}
}
for (i=0;i&ltnActual;i++) {
posts[i][1] = posts[i][1].replace('\"', '&#34').replace('\'', '&#39');
document.getElementById('Day'+posts[i][0]).innerHTML = '&lta title="'+posts[i][1]+'" href="'+posts[i][2]+'" target="blank_">'+posts[i][0]+'</a>';
}
}

function BrowsePrev() {
var thisMonth = currentDay.getMonth()-1;
var thisYear = currentDay.getFullYear();
if (thisMonth&lt0) {
thisMonth = 11;
thisYear = thisYear-1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}

function BrowseNext() {
var thisMonth = currentDay.getMonth()+1;
var thisYear = currentDay.getFullYear();
if (thisMonth&gt11) {
thisMonth = 0;
thisYear = thisYear+1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}

function BackToday() {
currentDay = new Date();
generateCalendar();
}
//]]>
</script>

最後在要放置日曆的位置插入下列程式碼：

< center>
< table border="0" id="Calendar" cellpadding="0" cellspacing="0">
< caption>
< a href="#" onclick="javascript:BrowsePrev();return false;" title="Previous Month">&amplt;&amplt;< /a>&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;
< a href="#" onclick="javascript:BackToday();return false;" title="Back to Today"> < span id="CalendarCaption"> < /span>< /a>&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;
< a href="#" onclick="javascript:BrowseNext();return false;" title="Next Month">&ampgt;&ampgt;< /a>
< /caption>
< tr>
< td id="CalendarTable" class="act"> < /td>
< /tr>
< /table>
< script type="text/javascript">
generateCalendar();
< /script>
< /center>


有一點要注意的就是要修改 Calendar.base='http://bartstalk.blogspot.com/'; 這行敘述，將裡面的網址改為你自己的 blog 位址 (開頭的 http:// 與 結尾的 / 都不可以省略)，這樣就完工了，在 IE 上應該也可以正常顯示出月曆囉。