2014年5月1日 星期四

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

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

Wayne Fu 0 A+
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 參數。



四、小提醒


由於前陣子才發生「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檔)疑似流量有限速」這篇文章即可。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP