2012年6月22日

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

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 相關工具及技巧:

7 則留言:

  1. 請教版大:一、網誌清單當作交換連結的好處

    這個功能拿到 xuite 使用,

    或是有可以達到這樣功能的 java script 嗎

    回覆刪除
  2. 我也想知道有沒有可以達到同樣效果的語法用於Xuite
    我也想要有漂亮的交換連結
    Rainsakura

    回覆刪除
  3. 想要一模一樣的效果.....歡迎加入 Blogger 的行列 :P

    找了一些資料,看來只有這個效果比較好而已了:「大家來交換RSS Google動態部落格聯播教學

    另外這兩個也可以,但沒第一個方便,是給我自己做筆記的:「如何在google+版google reaer分享部落格聯播」、「JavaScript RSS Box Viewer 3.2β

    回覆刪除
  4. 謝謝你幫忙找到阿^^
    我才從無名搬到Xuite(當初跟blogger在選XD)一陣子~
    不想在搬家了~哈
    效果看起來也不錯呢!

    回覆刪除
  5. <5870839681280744650>(以上內容請勿刪除,從括號之後開始留言)不客氣,還好有滿意效果,本來有點擔心提出別的要求說~XD

    回覆刪除
  6. WFU~糟了,又有問題了~>_<
    這次我想改"圖示"
    但我發現用ie看時,會跳出"Stack overflow at line:0"這個訊息→https://picasaweb.google.com/108711451018509953764/MgHqGH#5827332888227817298

    我猜想,是不是我用的圖片是動態檔?
    後來我再進入修改語法時,用搜尋卻找不到有關「」
    這一串的字眼?

    在網頁上我是有看到仙人掌的圖示,卻在朋友的網頁裡,看不到我修改過的圖示?
    https://picasaweb.google.com/108711451018509953764/MgHqGH#5827332888923394370

    blogger是不是被我改爛了啊?QQ

    回覆刪除
  7. <6293862077049404935>(以上內容請勿刪除,從括號之後開始留言)
    1. 你給的那一串 "https://picasaweb.google.com/108711451018509953764/MgHqGH#5827332888227817298" 這不是圖片網址啊? 我幫你把仙人掌圖示網址找出來了,你把小圖示網址改成這個吧:https://lh3.googleusercontent.com/-mM9yTNc-kvg/UN3Qhd3IUoI/AAAAAAAABaI/qpW1SGuO1cg/s15/saboten.gif

    2. 你可以看一下你的留言,「」裡面是空的,所以我不知道你找不到什麼,也許你傳的字元裡面有 "<"、">" 符號,你可以用 g+ 傳到我的帳號看看

    3. 你在範本找不到什麼,會不會沒勾選"展開小裝置範本"

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。