Taiwan Powers Blogger

最近我在#osxchat blog上做了一個類似 Mac OS X 圖形使用者環境中的 dock 效果，這是透過 java script 完成的，作法如下：

<script type="text/javascript"> 首先要宣告這是一段 // javascript

names = new Array(11); // 宣告一個 array 存放名字
names[1] = "zonble";
names[2] = "mjhsieh";
names[3] = "gugod";
names[4] = "lukhnos";
names[5] = "mikeliu";
names[6] = "orcas";
names[7] = "julian9";
names[8] = "momizi";
names[9] = "whiteg";
names[10] = "b6s";

icon = new Array(11); // 宣告一個 array 存放圖片網址
icon[1] = "http://www.flickr.com/photos/1239483_7cccdc79b5_t.jpg"; //zonble
icon[2] = "http://www.flickr.com/photos/924056_71ce07c844_t.jpg"; //mjhsieh
icon[3] = "http://www.flickr.com/photos/1024441_30e440460f_t.jpg" //gugod
icon[4] = "http://www.flickr.com/photos/1024410_9ef37cf996_t.jpg" //lukhnos
icon[5] = "http://www.flickr.com/photos/924048_f9cd762e60_t.jpg"; //m3744 mikeliu
icon[6] = "http://www.flickr.com/photos/1024434_e442a7af22_t.jpg"; //orcas_cs
icon[7] = "http://www.flickr.com/buddyicons/25132758@N00.jpg?1100853684"; //julian
icon[8] = "http://www.flickr.com/buddyicons/24827808@N00.jpg?1100248842"; //momizi
icon[9] = "http://www.flickr.com/buddyicons/65404987@N00.jpg?1099641278"; //whiteg
icon[10] = "http://flickr.com/buddyicons/68102773@N00.jpg?1099499124"; //b6s

urls = new Array(11); // 宣告一個 array 存放每個人 blog 的網址
urls[1] = "http://zonble.twbbs.org"; //zonble
urls[2] = "http://http://apple.sysbio.info/~mjhsieh/"; //mj
urls[3] = "http://gugodl.org/"; //gogle
urls[4] = "http://luknos.org/wp/"; //lukhnos
urls[5] = "http://photozone.blogdns.org/blog/space/start"; //mikeliu
urls[6] = "http://blogs.infoecho.net/echo/"; //orcas
urls[7] = "http://homepage.mac.com/julian9/Home/Menu3.html"; //julian
urls[8] = "http://momizi.z6i.org/" //momizi
urls[9] = "http://blog.whiteg.net/" //whiteg
urls[10] = "http://b6s.blogspot.com/" //b6s

function a(a){ //這個 funtion 的用途是，讓每次滑鼠移動到某個 icon 上之後，放大張圖片以及前後兩張圖片的大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "45px";
zoomdiv.style.width = "45px";
zoomline.style.display = "block";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
}

function b(a){ //在滑鼠移開的時候，還原成原始大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
zoomline.style.display = "none";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
}

function dock(){ //最後，這是實際把 dock 印出來的部份，可以看到用了很多 CSS 語法
document.write('<div style=\"margin: 0 auto 0 auto; width: 440px; height: 60px; padding-right: 10px; margin-top: -35px; valign: bottom;\">');
for(i=1;i < 11; i++) {
document.write('<div style=\"display: block; width: 40px; float: right;\" id=\"icondiv'+ i + '\"><div style=\"margin:0; text-align: center;\"><a href=\"'+ urls[i] +'\"><img src=\"' + icon[i] + '\" id=\"ouricon' + i +'\" onmouseover=\"a(' + i + ')\" onmouseout=\"b(' + i + ')\" style=\"width:30px; border: 1px solid #333; margin: 0;\"/></a></div><div style=\"display:none; font-size: 9pt; font-weight: bold; margin: 0; text-align: center; color: #000; padding: 0;\" id=\"iconline' + i +'\">'+ names[i] +'</div></div>');
}
document.write('</div>');
}

</script>

您可以在修改模板的時候，把這段語法放在<head>當中，然後在 body 當中的適當位置插入：

<script type="text/javascript"> dock(); </script>

這樣就可以了。

Blogger.com 不知道為什麼一直不支援 trackback，前陣子我在自家 blog 稍微抱怨這件事時，好心人路過告訴我一個還不錯的解決方案：http://www.haloscan.com/。

接下來就做個示範，一步一步地替這裡加上 trackback 功能吧！

首先，註冊個帳號。



註冊完畢，登入之後，看到這個畫面，直接點 next。



現在照著這一頁的說明，把 Step 1 的東西貼進 template。但是注意，Step 2 貼的時候要小心，別把自己原有的 comment 那一段也蓋掉了！而且 postCount 那段是不必要的，只要貼 postCountTB 那段進去就好。



舉例來說，本來這裡的 comment template 是：

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">" title="permanent link"><$BlogItemDateTime$></a>
<mainorarchivepage><blogitemcommentsenabled>

<a class="comment-link" href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">#comments">
<$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled></mainorarchivepage> <$BlogItemControl$>
</p>

Step 2 貼上去之後應該要像這樣：

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">" title="permanent link"><$BlogItemDateTime$></a></em>
<mainorarchivepage><blogitemcommentsenabled>

<a class="comment-link" href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">#comments">
<$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled>

<a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">');" target="_self">
<script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script>
</a>
</mainorarchivepage> <$BlogItemControl$>
</p>

然後大概得自己調整一下讓版面看起來一致。至於 Step 3 就自己決定要不要囉！

接下來當然是把 template 存檔，然後 trackback 就出現在 blog 上了。:)

對了，為什麼不用 haloscan 提供的自動安裝功能就 好了呢？這功能方便是方便，但會把 comment 也一起換掉，如果你的 blog 上已經有很多舊的 comments，便無法顯示出來了。就算沒這個問題，被換掉的 comment 變成一個外來頁面，介面操作上和視覺上也都不太合適。所以還是乖乖手動改 template，只用 trackback 功能就好囉！

雖然說 Blogger.com 沒有提供近期迴響列表功能，但是還是可以透過給個彎，達到相同的效果，簡單來說，只要把某一個在 Blogger.com 上的 blog 的所有的迴響留言，全部貼到另外一個在 Blogger.com 上的 blog 就好了。

Settings->Email->Mail-to-Blogger Address 這個選項的用途是，您可以設定某一個blogger.com 的信箱，當作是發表之用，只要往這個信箱寄信，就可以張貼成 blog。所以，用我們在前一篇文章中所說的說法，我們可以先把 blog A 的留言，先寄到你的信箱，然後這個信箱又設定了自動轉寄，把寄過來的留言，貼到 blog B 設定的信箱，然後貼到 blog B 上。如此一來，blog B 就是 blog A 的迴響留言列表了。

而用同樣的方法，您可以把 google news alert、其他有的沒有的電子報，都轉寄到某個 blog 上。如此一來，您就可以用 blogger.com ，當成是您的專屬新聞閱讀介面了（您可以參考看看「中文劇場新聞」，還有，如果是收HTML郵件的話，您應該會需要把Settings->Formatting-> Convert line breaks關掉）。

或是，您可以用bloglet，把別的blog的RSS轉成email之後，再透過 email 自動轉貼到你的 blogger.com blog，這樣，你也就有了一個可以自己設計版面的 RSS aggrerator 了。

Blogger.com 並沒有提供像「近期留言列表」（Recent Comments）這樣的功能，您無法從首頁上，知道最近有人對您的文章發表感想。不過，沒有關係，您可以從Setting->Comments->Comment Notification Address這個選項中，設定成您的信箱，這樣只要有人發表留言的時候，就會發信通知您了。

而如果是許多人都在寫同一個blog的時候，您就會發現這個選項只能夠設定一個地址，而不能夠通知所有的作者。解決的方法也很簡單，您可以把收件地址設定成一個mailing list，或是，您可以設定一個專門用來收留言通知的信箱（例如去gmail申請一個），然後將這個信箱設定成收到信的時候，轉寄給所有的作者就可以了。

Blogger 本身的 HTML 編輯器支援「引用 (blockquote)」這個語法，因此幾乎每個預設模板裡都會寫。不過這東西畢竟是老外發明的，有個特性不太適用於中文。請到您的模板裡瀏覽一下，找找那裡有設定 blockquote 的 CSS。找到之後，看看裡面有沒有 font-style:italic 這一行，如果有的話，強烈建議您去掉它。為什麼呢？

因為中文字實在和「斜體」這個概念合不來啊！

您可以考慮用 font-weight:bold 來做粗體效果，用 font-family 換個字體，或用 color 指定其他顏色，都會比 font-style:italic 看起來舒服些。

Blogger.com 所提供的預設模板，都算相當簡單而且美觀，而老實說，想要一個自己的blog，其實用系統內建的模板就已經很夠用了。但是，不管怎麼樣，就台灣人的使用來說，有一些調整算是相當必須的。

通常來說，預設的模板的開頭，經常是這個樣子：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

請修改成這個樣子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<$BlogMetaData$>
<title><$BlogPageTitle$></title>

就Blogger.com所定義的模板中xml:lang="en"這一段的意思，是使用將語言設定為英文的XHTML標準，雖然這樣也可以正確顯示繁體中文，但是就許多的瀏覽器來說，特別是使用了Gecko引擎的瀏覽器如Mozilla、Netscape及Firefox等，往往就會使用簡體中文字體，套用到繁體中文上，比較明顯的差別是在台灣我們習慣標點符號位在每一行的中央，而簡體中文的標點符號則是對準基線（baseline），在閱讀的時候會比較不習慣。而如果拿掉這一行的定義，標點符號就會放在中央了。

另外，就是要將<$BlogMetaData$>放在<title>的前面，那是因為我們需要將XHTML的文字編碼定義，放在文件的標題之前。這是因為我們通常在Blogger.com上使用UTF-8文字編碼，而在微軟的Internet Explorer瀏覽器中存在著一個bug，中文的IE會預設以Big5開啟網頁，然後一行一行讀取設定，而不是先去偵測文件中使用標籤定義好的編碼，然後再去以這種編碼方式開啟網頁。

這造成的結果是，如果在title中使用了UTF-8的中文（在單篇文章彙整，或是您設定了
中文的站台名稱，就會出現這種狀況），而編碼的定義放在title之後，那麼因為IE還是以Big5解讀title，然後往往就會因為找不到title的還原標籤（close tag），而讓IE以為在title後面的全部內容都是title的範圍，也就出現了IE開啟UTF-8網頁時，出現一片空白的狀況。

我又在blogger上面開了一個新的blog。我的blog還真多啊。

簡單來說，這個blog的用途，是一個blog on blogger，在於介紹怎樣將blogger.com所提供的服務，變得能夠更符合台灣使用者的需要。就目前來說，要架設一個blog網站有非常多的選 擇，在台灣已經有本土的、而且還不錯的blog hosting例如樂多blog等， 甚至連TVBS都開始提供了blog hositng的服務，而如果要自己架設的話，在台灣Movable Type以及WordPress等也都相當普及，而在台灣使用WordPress，我在其中也有份，但是就系統的簡單易用以及彈性上， blogger.com還是非常有趣的工具。

blogger.com可以讓每一個帳號可以同時有許多個blog，也可以讓許多人同時寫同一個blog，在不需要額外自行架設任何工具的狀況下，就可以同時參與許多不同主題的專屬blog。以我而言，我就同時參與了#osxchat blog以及錯誤特攻隊等。而雖然blogger.com提供的服務陽春了些，不支援近期留言列表、不支援文章分類，但是因為具備相當的彈性，所以有許多方法、繞過一些彎，還是可以使用這些功能—這些作法就是以後要慢慢說了。