2012年6月1日 星期五

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

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

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

當時覺得實在太神奇了,這是那個強大的外掛竟然可以做到這一點,後來才發現,原來這個所謂的強大外掛就是 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 相關工具及技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP