[小工具]讓 Blogger 按下標籤後出現文章列表

2016.3.28 公告：目前已發佈新版，請前往「Blogger 標籤文章列表 V2」

前陣子在 +coke tech 的「首頁」看到，怎麼這個標籤分類工具有點眼熟？原來就是「Blogger 文章列表極速版__依標籤排列」。當初設計這個工具的原意本不在此，不過現在看起來，當成 Blogger 標籤工具也是一個很棒的應用！

其實長久以來，一直陸續有看到這樣的需求──「能不能讓 Blogger 按下標籤後出現文章列表」，尤其從別的部落格平台轉戰 Blogger 的使用者特別會詢問。因此感謝 +coke tech 的巧思，那麼就來動手調校一下原本的文章列表。

點此看範例網頁

一、如何修改文章列表

因為原本的「文章列表__依標籤排列」是放在文章裡面，所以標籤按鈕做得又大又寬。現在要放在側邊欄這個狹小的區塊，加上很多使用者的側邊欄設定得很小，常常不到 300px，甚至低於 250px，因此連帶字體大小也需要更改。

在主程式不變的架構下，WFU 將 CSS 修改為適合在側邊欄顯示的狀態，及隱藏 "新文章" 的標示，來減少寬度。不過每個使用者的範本都不一樣，最終想要適合自己版面的話，可能還是需要一點 CSS 基礎，才能改得漂亮。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

接著請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


如果只想列出部份標籤的話，那麼 G 行可以填入不想顯示的標籤名稱，每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。

最重要的是 L 行，由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。

現在可以存檔看效果，也可先到 DEMO 網頁試玩一下：

點此看範例網頁

三、CSS 修改

1. CSS 區塊擺放位置

請對照程式碼行號，R～BG 行的 CSS 區塊，如果放在小工具的區塊也是能執行，只是網頁執行效率比較差一點(不一定感覺得出來)。而好處是，程式碼全部放在一起，管理上比較方便，將來如果要移除工具的話不會漏掉。

對於網頁高手而言，請自行將 R～BG 行的 CSS 區塊放在範本中 </head> 之前即可。


2. 修改字體

每個人的範本都不一樣，如果字體大小、顏色不如預期的話，修改的地方如下：

• 標籤：綠字 /* 標籤按鈕 */ 的區塊
• 文章標號：綠字 /* 文章編號 */ 的區塊
• 文章標題：綠字 /* 文章標題 */ 的區塊

可以新增的參數舉例如下：

• 字體大小： font-size: ??px;
• 字體顏色： color: #aaa;

3. 修改項目符號

每個標籤前面的預設符號為 "●"，這也是經由 CSS 設定出來的。要修改的話，請詳閱以下的步驟：

A. 進入這個網頁：「CSS & Javascript Character Entity Calculator」




B. 按照上圖 A～C 順序，貼上自訂的字元(例如"●") → 按下 Convert → 在 CSS Value 那一行會產生對應的轉換字串(例如 "\25CF")


C. 參照程式碼 AB 行，將紅色字串置換成上個步驟 B 所產生的轉換字串即可。

想要修改項目符號的顏色，也可在 AA～AD 這個區間自行增添 CSS 參數。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理