2012年4月21日

Blogger 側邊欄相關工具及技巧 (筆記)

A+

(Pic from: Jeremybennett Sticky Note Pad And Pencil clip art)

最新文章、回應小工具

Abin 最新回應Abin's Tech Note──「最新回應」模組 (Recent Comments)
簡單的程式,又能動態讀取後台的資料庫,速度與功能兼備,四星級工具。

 LVCHEN 最新回應LVCHEN 的美國生活指南──最新回應 2.0 來囉!
殺手級程式,功能與速度都無可挑剔。

 WFU BLOG 最新回應WFU BLOG──Blogger 最新回應+留言者頭像+文章標題

 Abin 最新文章Abin's Tech Note──最新文章模組終極版
簡單的程式,又能動態讀取後台的資料庫,速度與功能兼備,四星級工具。

 Pochen Lin 最新文章+縮圖不連續x思考斷x面解構──Blogger RecentPosts 最新文章插件 V1.0.0
殺手級程式,不過需要到後台設定「提供完整文章資訊」,適合各種外連圖床。

 WFU BLOG 最新文章+縮圖WFU BLOG──Blogger 最新文章模組加上任意尺寸縮圖__免提供完整文章資訊以及 Json 縮圖資料解析
不需設定「提供完整文章資訊」,Blogger 上傳或 Picasa 圖床的縮圖可更改實際尺寸。

 最新文章與最新回應並排顯示:一個人在途上──以選項卡方式顯示最近留言和文章
整合最新文章與最新回應的介面,非常陽春,但執行速度快、又節省版面,可以自己稍微動手改個版面,就能美觀與速度兼備。

 使用官方提供的最新文章與最新回應:逍 遙 窩~資訊分享站──blogger最新文章 & 最新回應_小工具「資訊提供」
對系統而言是負擔最輕的一種方式,效能為上的站長可以考慮。


分頁選單工具

 簡單安裝的 Tab 選單:WFU BLOG──讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能
 Tab 選單-1:凱特打結該該叫──一分鐘在Blogger加上Tab View分類欄
 Tab 選單-2:弱格吉米言──利用 jQuery 來製作 Tab 選單(參考自男丁格爾)
 jQuery Tab 集錦:21 Amazing jQuery Tabs Collection


其他小工具

 樹狀標籤:WFU BLOG──讓Blogger的標籤能樹狀分類
網站標籤一多時,用樹狀標籤是很好的管理方式,能夠收合起來才不佔空間。這個 WFU BLOG 的自製工具,比起其他版本樹狀標籤工具,優點為各大瀏覽器都相容、程式非常地小、安裝十分簡單、新增標籤不必再更改程式碼;此版本能處理兩層標籤。

 無限層樹狀標籤WFU BLOG──讓Blogger的標籤能"多層"樹狀分類
新版樹狀標籤能處理無限層,有兩層以上的分類需求可使用這個工具。

 熱門文章+縮圖:WFU BLOG──隨心所欲更改 Blogger 熱門文章縮圖的尺寸__兼談圖示製作技巧

 官方標籤雲:[CSS] 美化 Blogger 官方標籤雲

 3D 標籤雲:Dream Talker──HTML5 標籤雲 - TAGCLOUD

 標籤雲與樹狀標籤並存的方法:一般而言,如果使用樹狀標籤,就會使標籤雲變醜;使這兩者並存又不影響美觀的實做方式為:A. 每篇文章除了原本會顯示於標籤雲的標籤之外,另外多設一個 "AAA-BBB" 格式的標籤給樹狀標籤用。 B. 在標籤雲的設定將所有樹狀標籤都改為不顯示。效果請參考這個網站:「A Casual Place

 標籤選台器LVCHEN 的美國生活指南──標籤選台器 2.0 發表會
殺手級程式,其他心得同前,不再贅述。

 將標籤放在導覽列:WFU BLOG──將 Blogger "標籤" 小工具放在導覽列實作

 文章日曆LVCHEN 的美國生活指南──Blogger 專用的 Ajax 文章日曆 (Blogger AJAX Archive Calendar)
很棒的 idea,除了搜尋的功用外,還可把這個工具當成回味自己與一手打造的 Blogger 共同走過來的路~~

 把導覽列的搜尋功能搬到側邊欄Abin's Tech Note──增加站內的全文搜尋
很陽春、速度不快,但是個實用的站內全文檢索工具。會介紹這個工具的原因是,官方提供的搜尋工具雖然功能很強大(使用 ajax 技術),不用刷新頁面就能將搜尋結果直接顯示在當前頁面,但缺點是年代久一點的文章通常是搜尋不到的。所以此時,這個既陽春又稍慢的工具,保證可以搜尋到站內文章的每一個字。

 類似網誌清單的小工具:0 與 1 謎詭世界──利用RSS顯示多個部落格最新文章

 Histats 網站計數器:我的 Histats 計數器操作心得, 你也可以這麼使用

 搜尋框樣式-1:+Mark X ── 水晶版 Google 搜尋框
 搜尋框樣式-2:+Mark X ── 如何做搜尋框
 搜尋框樣式-3:LION'S BLOG──變化 Blogger 的小工具 Google 搜尋框
 搜尋框樣式-4:LION'S BLOG──搜尋框樣式


側邊欄小技巧

 讓側邊列元件在特定頁面顯示/不顯示:Abin's Tech Note──讓側邊列(Sidebar)的元件只在首頁顯示/不顯示
 讓側邊列元件能夠展開和摺疊:Abin's Tech Note──讓側邊列(Sidebar)的元件能夠展開和摺疊 (Element Toggling)
以上兩個工具可節省頁面的空間。

 伸縮側邊欄-1:Fun New Run High──讓blogspot的側邊欄 sidebar 伸縮自如
 伸縮側邊欄-2:ETBlue 外星人寄居地球──新作法!Blogger 動態版型,讓左/右側邊欄消失,以文章區塊填滿側邊欄(使用 b:if 條件式,無 javascript)
想讓文章區塊大一點、讓眼睛看得舒服一些,可以考慮使用;不過想賺廣告收益的話,小心很多區塊被藏起來了。

 側邊欄上的項目加上符號/圖案:相遇是一場不經意的偶然──筆記│個性化側邊欄上的項目加上符號/圖案

 網誌清單當作交換連結:WFU BLOG──Blogger 網誌清單的妙用及網站小圖示的調校


筆記增補時間請見下方更新資訊。


Blogger 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

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