2014年5月16日

[小工具]讓 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 參數。


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

24 則留言:

  1. 版主你好~
    由於我最近剛開始使用blogger看見您的教學後,覺得受益良多~
    目前有使用您此篇的方式!!!!!!
    這是我的blog:http://orz9rzorz.blogspot.tw/
    期待您更多的教學!!!!!

    回覆刪除
  2. 這真是夢寐以求的程式碼!!!
    可惜要設定的是"不顯示的標籤名稱",而非欲顯示的標籤,
    文章&標籤量多起來的話,設定"不顯示的標籤名稱"其實滿痛苦的QQ

    回覆刪除
  3. 因為在手機上瀏覽時,blogger 沒有像 pixnet 的介面那麼完善,我把這篇語法用在blogger的分頁,這樣在手機上也能看見文章分類。感謝!

    回覆刪除
  4. 你好,關於先前的問題(http://goo.gl/FTml5q),我安裝了這篇的新版後,的確能顯示全部文章了,謝謝。

    但就出現了新的問題,就是文章依了發表日期排列,
    之前舊版本是依文章標題排列,但新版本卻是依文章的發表日期排列,
    由於我的文章標題絕大部分開頭都是數字日期,依發表日期排列,反而會亂。

    所以,想再請問有方法可依文章標題排列,且也能顯示全部文章嗎?

    舊版,依文章標題排列:http://1z2x1z.blogspot.com/p/blog-page_6.html,
    新版,依文章發表日期排列:http://1z2x1z.blogspot.com/p/blog-page_23.html

    謝謝。

    回覆刪除
  5. <721793972668681326>(以上內容請勿刪除,從括號之後開始留言)
    原來已超出了範疇……那就算了,
    是怎也好,最後真的謝謝你了。

    回覆刪除
  6. 您好!我嘗試裝“讓 Blogger 按下標籤後出現文章列表”,
    到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及您上面的程式碼按儲存后,一直出現pleas wait在轉圈的情況,不知道問題出在哪裡,請指教,謝謝!

    回覆刪除
  7. <344277098279059415>(以上內容請勿刪除,從括號之後開始留言)
    您好!
    我就是裝不上去。
    我現在裝上去,麻煩您有時間看看。謝謝!

    回覆刪除
  8. <740996671384527136>(以上內容請勿刪除,從括號之後開始留言)剛剛再試裝一次,居然裝上了,我前2天一直裝不上。感恩!

    回覆刪除
  9. <4634032631806454482>(以上內容請勿刪除,從括號之後開始留言)請教:1,裝完“讓 Blogger 按下標籤後出現文章列表”這個小工具后,下面出現"Label TOC"的字樣。
    2,裝完”Blogger 數字分頁導覽 + Ajax 動態頁面載入效果“這個小工具后出現”Ajax Page Navigation“的字樣
    如何使這2個字樣不顯示在網頁上面呢?
    謝謝!

    http://ourfashland.blogspot.hk/

    回覆刪除
  10. <1306923718078330562>(以上內容請勿刪除,從括號之後開始留言)明白,謝謝!

    回覆刪除
  11. 文章數超過10筆,會一直縮排,請問怎麼辦呢?
    http://638207.blogspot.tw/p/sitemap_59.html

    回覆刪除
  12. <783410307992412479>(以上內容請勿刪除,從括號之後開始留言)
    謝謝您的解答,感恩~

    回覆刪除
  13. 版主您好 目前遇到問題就是 blogger如果設定不公開的話 語法會無法作用 請問該如何解決
    感激

    回覆刪除
  14. <2946476371831310449>(以上內容請勿刪除,從括號之後開始留言)
    補充一下,是只有設定邀請的人才能觀看

    回覆刪除
  15. <3616002972447724146>(以上內容請勿刪除,從括號之後開始留言)
    原來如此,感謝您的回覆!!
    您的網誌真是受用,可以學到很多東西,辛苦了
    謝謝

    回覆刪除
  16. Wayne你好,這個小工具很讚很好用,想請問有辦法使用雙層標籤後再顯示文章列表嗎? 謝謝

    回覆刪除
  17. L行的js檔裡面,還包了另一個http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
    我試用的時候,需要把jquery.js先另存上傳、更新進blogger-label-toc-1405122-min.js裡面存檔、再將新的js上傳使用。否則小工具出不來...請問我這樣處理方式算是正確嗎?

    回覆刪除
    回覆
    1. 謝謝提醒,不過比較喜歡這一版的呈現方式,不用另外跳轉。之後會再嘗試樹狀標籤^^

      刪除
  18. 您好,我照您這篇的方法去做,新增小工具然後安裝程式馬,但是依然沒有成功,請問有可能有啥原因呢?
    http://nickchuang-sherry.blogspot.tw/
    以上為我的網誌

    回覆刪除
    回覆
    1. 您好,你的內文有提到"由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」"。
      因此我照您"WFU BLOG 外連 JS 變更及操作說明"這篇文章的作法,將JS檔下載並上傳到自己的GOOGLE雲端硬碟,然後置換您的L行連結。
      請問我的作法是否有錯需要修正? 不需要置換,直接用您原本內文的程式碼即可?

      刪除
    2. 您好,已照您說的上傳到DROPBOX,並用連結取代L行,但是依然沒有成功

      刪除
    3. 原來如此!!
      我照您所指導的重新調整過後就可以使用了,非常謝謝您,這功能真的太棒了!!

      刪除
    4. 您好,不好意思再跟您請教一個問題
      我將labelTocTitle:hover設定成text-decoration: underline,希望游標上去他只有出現底線
      但是前面的項目符號也會出現底線,請問要如何修正成只有標籤出現底線而項目符號不要有呢?

      刪除
    5. 您好,不好意思再次跟您請教問題,之前使用您此篇的文章列表功能,也順利成功了
      但如今不知為何又再次失效,旁邊的小工具存在但是裡面什麼東西也沒有,請問是不相容?還是有其他原因?
      以下為我的網誌: https://nickchuang-sherry.blogspot.tw/

      刪除

張貼留言注意事項:

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

TOP