Blogger 的新版面

雖然 blogger 推出新版面很久了，但之前一直沒有換，主要原因之一是日曆功能，另一個就是調整頁面寬度。

在實際上換過新版面之後，才發現原來新版的blogger在調整頁面寬度方面比起舊版的方便太多了。之前還要修改原始碼才能改變寬度，但現在直接在範本設計工具→版面配置→調整寬度的地方就可以直接用拉的來調整。雖然還是有上限，不過至少可以調整總寬度和側欄寬度了。

另外就是日曆功能。之前為了讓日曆能結合文章的archive，花了很大的功夫拿了別人的程式碼，再經過修改之後才能用。但是換了新版面之後，這個 widget 似乎就不能用了，也不知道新版的版面有沒有好的解決辦法。現在就先拿沒有整合 archive 功能的現成日曆來用囉...

在 Blogger 中插入月曆

為了在 blogger 中插入月曆，真是費了一番工夫。總共參考了好幾篇文章：

1. 笨蛋壩子的隨筆 -- 在Blogger上安插月曆( Calendar) - IE 修正版
2. Kevin的私人書房 -- 實作Blogger月曆( Calendar)
3. Abin's Tech Note -- 為 Blogger 加入整合日曆 Archive Calendar

當然，純粹需要月曆的功能，像 google calendar 之類的外掛就可以用了，不過樣式不好看，而且就只是單純月曆的功能。而現在的這個方法，則是把月曆與 blog 存檔整合，點擊月曆上的日期就可以看到當天所發表的文章。一開始，照著笨蛋壩子的方法做，在最後一個步驟會卡住。接著換到 Kevin 的方法，顯示卻有問題，後來換到 Abin 的方法，月曆終於可以顯現出來，不過顏色不太合，因此我是用一部份笨蛋壩子的程式碼，再加上一部份 Abin 的程式碼。好吧，其實是我比較懶，懶得去學怎麼改顏色等等的方法，只會貼來貼去的。我的方法如下：

首先，在 /* 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 之前插入

<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>


最後，找到以下的程式碼 (這部份需要先啟用 blog 存檔)

<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 = 'http://abintech.azhai.org/';
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>

其中 http://astro1916.blogspot.com/ 這個部份要改成自己的網址。結束之後就可以收工了。



Blogger 的"最新回應/最新文章" 功能

這也是 ptt 某神人的鉅作，可以線上產生程式碼。只要在範本中的"加入網頁元素"裡的"HTML/Javascript" 插入程式碼就可使用。

最新文章功能
最新回應功能

Blogger 的繼續閱讀功能

雖然說以前也不常使用 Blog，但多多少少也有用過無名寫過一些東西 (在無名剛用 bbs 帳號換 blog/album 帳號的時候)。接下來，搬到了 blogger，雖然這裡有些功能似乎沒有像無名這麼多，例如 "繼續閱讀" 的功能，它可以讓版面看起來乾淨一些，尤其是有許多圖文並茂的長篇文章時。雖然 blogger 沒有直接提供這個功能，但是有自行編寫 Javascript 的功能，而網路上也有不少神人有寫了這些功能的懶人包。

感謝 ptt 的 BLOG 板上神人的 "Blogger繼續閱讀懶人加強版"