前陣子在 +coke tech 的「首頁」看到，怎麼這個標籤分類工具有點眼熟？原來就是「Blogger 文章列表極速版__依標籤排列」。當初設計這個工具的原意本不在此，不過現在看起來，當成 Blogger 標籤工具也是一個很棒的應用！其實長久以來，一直陸續有看到這樣的需求──「能不能讓 Blogger 按下標籤後出現文章列表」，尤其從別的部落格平台轉戰 Blogger 的使用者特別會詢問。因此感謝 +coke tech 的巧思，那麼就來動手調校一下原本的文章列表。
一、如何修改文章列表
因為原本的「文章列表__依標籤排列」是放在文章裡面，所以標籤按鈕做得又大又寬。現在要放在側邊欄這個狹小的區塊，加上很多使用者的側邊欄設定得很小，常常不到 300px，甚至低於 250px，因此連帶字體大小也需要更改。
在主程式不變的架構下，WFU 將 CSS 修改為適合在側邊欄顯示的狀態，及隱藏 "新文章" 的標示，來減少寬度。不過每個使用者的範本都不一樣，最終想要適合自己版面的話，可能還是需要一點 CSS 基礎，才能改得漂亮。
二、安裝程式碼
請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：
很難得的，本篇沒什麼參數需要特別更改，因為重點在 CSS 的修改，因此 js 的部份一般是保持預設值即可。
如果只想列出部份標籤的話，那麼 G行可以填入不想顯示的標籤名稱，每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。
現在可以存檔看效果，也可先到 DEMO 網頁試玩一下：
三、CSS 修改
1. CSS 區塊擺放位置
請對照程式碼行號，R～BG行的 CSS 區塊，如果放在小工具的區塊也是能執行，只是網頁執行效率比較差一點(不一定感覺得出來)。而好處是，程式碼全部放在一起，管理上比較方便，將來如果要移除工具的話不會漏掉。
對於網頁高手而言，請自行將 R～BG行的 CSS 區塊放在範本中
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 參數。
四、小提醒
由於前陣子才發生「Google Drive(js檔)疑似流量有限速」的情形，而本文的小工具，由於放在側邊欄，預期 js 檔被執行的機率很高。為了避免將來某天這個小工具無預警罷工，建議讀者自行將 js 檔分流：
- 將程式碼 L 行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0NGhwZ2tQMU45VDA/blogger-label-toc-140512-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串。
以上流程不清楚如何操作的話，一樣參考「Google Drive(js檔)疑似流量有限速」這篇文章即可。