[教學]Blogger 網誌清單的妙用＋網站小圖示的調校

之前在友站看到交換連結清單，發現竟然除了基本的網站名稱之外，還能夠抓到最新文章的標題、時間等等資訊，而且就像即時排行榜一樣，只要交換連結發佈了最新文章，該網站就能立即攀上排行榜第一名，位置自動跳到最頂端！

當時覺得實在太神奇了，這是那個強大的外掛竟然可以做到這一點，後來才發現，原來這個所謂的強大外掛就是 Blogger 提供的小工具──「網誌清單」。


一、網誌清單當作交換連結的好處

網誌清單的真正用途其實是追蹤自己喜愛的網誌，放在網站的側邊欄就能隨時知道喜愛的網誌是否有了最新文章。但是如果拿來當作交換連結的話，其實有不少好處：

1. 排序方式：網誌清單的順序，可採依照「網誌標題字母」排序，或是依照「最近更新」的時間點來排序。如果採用後者來排序的話，那麼將是一個很好的獎勵機制，只要網站持續有更新，那麼每個網站都有機會站上排序第一的位置，在所有交換連結裡獲得比較醒目的位置。

2. 顯示數目：網誌清單可選擇顯示「所有網誌」、或是顯示 5、10、25 個網誌。當清單有太多網站時會影響版面美觀，建議可依版面選擇顯示 5 或 10 個網誌，那麼將會只有最近 5 個或 10 個有更新的網誌會顯示在交換連結，無形中成為一種良性競爭，鼓勵交換連結的網站持續更新內容，以免失去曝光度。

說完了優點，如果也想在自己的網站建立網誌清單，與其他網站進行交換連結，請參考以下我使用網誌清單的步驟與心得。



二、安裝網誌清單

安裝網誌清單的步驟請參考這個「教學網頁」。在顯示的細項共有五個選項可以勾選，可以依照個人需求、版面配置來選擇。

比較特殊的是「圖示」這個選項，如果交換連結的網站有設立「網站小圖示」的話，那麼在網站名稱前面就會顯示專屬的網站圖示，而非制式化的 BSP 圖示。我會建議勾選「圖示」，因為版面看起來比較漂亮，沒勾選的話連制式化 BSP 圖示也沒有。


三、設立網站小圖示

幫自己的網站設定小圖示有很多好處，除了可以出現在別人的網誌清單上，如果自己的網站被訪客加入書籤，小圖示一併也會出現在書籤上，比較容易被找到。那麼，要怎麼幫自己的網站加上「網站小圖示」呢？

請按照這個「教學網頁」的步驟進行即可，如果沒有現成圖示的話，該網頁也提供了一個「線上製作圖示」的網站。

附帶一題，網站小圖示只能使用 16 x 16 大小的圖檔，所以無法呈現複雜圖案；建議圖示以字母、中文、簡單線條、鮮豔配色來發揮創意，就像 Google 、Blogger 、硬是要學 ，這幾個著名網站的圖示都是使用使用字母、文字的圖案，使得辨識度都很高。


四、解決網誌清單圖示的顯示問題

網誌清單勾選「圖示」的選項後，當交換連結沒有設定網站小圖示，若是 Blogger 平台的網站則會顯示 的預設圖示，但其他 BSP 平台的交換連結就不一定能 100% 抓到預設圖示。除了自架網站不會有預設圖示，在 IE 下也常常抓不到其他平台的預設圖示，那麼就會影響版面美觀。

此時可以利用語法，當圖片顯示不出來時，使用替代圖片來顯示，也就是我們幫系統裝預設圖示，請按以下步驟進行──

1. 先按照「二、安裝網誌清單」的步驟進行。
2. 到 Blogger 後台 → 範本 → 修改 HTML
3. 找到這一行程式碼：

<input expr:value='data:item.blogIconUrl' type='hidden'/>
4. 置換為以下程式碼：

<img width='16' height='16' expr:src='data:item.blogIconUrl' onerror='this.src="替代圖片網址"' />
以上程式碼的意思就是，使用 onerror 這個事件，當系統讀取網站小圖示失敗時，將圖檔網址轉向替代圖片網址，因此紅字的部分請輸入自己想要顯示的預設圖片網址，最好做成 16 x 16 的大小。

本站幫交換連結使用的預設小圖示為 ，在右邊側邊欄「友格動態」、「關注1」或「關注2」中，如果有看到藍色吊橋小圖示 ，就表示該連結原本是讀取不到網站小圖示的；至少有圖示的狀態，比網站名稱前面空蕩蕩的狀態好上一些囉。

Blogger 相關工具及技巧：