2013年8月5日 星期一

[blogger] 標籤多層次樹狀清單設定


     將blogger之標籤設定為樹狀展開的方式參考自WFU大大的文章Blogger文章分類__「多層樹狀標籤」更新版,此法對於主標籤的順序可以自行做調整,但於主標籤下的次分類就無法編輯順序,也就是上圖中(作業系統、應用軟體、瀏覽器)的部分,若有需求要解決這問題的話目前只能在次分類開頭加上數字或字母來讓系統自動排序(ex. 01.分類A、02.分類B、...)。

    多層樹狀標籤的更改方式大致上跟著WFU大的文章做就可以,只是在編輯html碼上的操作上可能會有些混亂,這裡稍微整理一下個人處理流程。


前置步驟:


    此方式必須將所有欲分類文章之標籤重新更改為「大分類-小分類-最後分類」的形式。

Ex. 電腦相關-應用軟體-影音編輯

    大分類就是如前圖中的「電腦相關」、「電影相關」等最初標籤,設定完成後之標籤如下所示。



更改html碼:

這裡個人直接從WFU大文章中的「三、安裝程式碼」→「4.安裝主程式碼」開始做更改,跳過前面安裝全部開合功能的部分。

首先進入部落格後台的範本編輯html頁面



搜尋標籤修改的原始碼位置,點選小工具中的「Label1」即可馬上找到。



可看到旁邊有將原始碼縮減的符號,2059至2139行被縮減起來。



點選展開後如上所示,在「Label1」之後的原始碼更改直接依照上述「4.安裝主程式碼」中說明的方式操作即可。



更改完畢後接著最重要的就是一一輸入之前設定好的標籤大分類了。



個人安裝完後有修改的部分是標籤字體顏色。

a:link   下修改的是標籤初始呈現顏色。
    a:hover下修改的則是滑鼠游標移到標籤上時顯示的顏色。

顏色設定的部分是開啟小畫家慢慢調,在隨便找個網站把RGB轉成16進位色碼,RGB轉16進位,基本上這樣就可設計出個人理想的樹枝狀標籤了。



15 則留言:

  1. 謝謝你的圖文補充,對於許多 Blogger 新手而言,有些敘述用文字的確不容易操作正確,我把這篇文章連結到「2013.8.6 補充」的部分了 ^^

    回覆刪除
    回覆
    1. 不會XD,倒是沒先知會就引用您的文章有點不好意思就是,請多見諒@@。

      刪除
  2. 謝謝你提供教學
    從無名搬家過來搬到快昏倒@@

    回覆刪除
    回覆
    1. 我也是剛從無名搬家過來,弄到快瘋了= =

      刪除
    2. 請問...分類可以有"/"符號嗎??
      比如說...占星-星座/相位/宮位-人物分析/書籍分析

      刪除
    3. 是可以的,不過剛連到你網誌看多層分類沒成功顯示,可能要確認一下html碼更改的部分喔@@

      刪除
  3. 謝謝您的教學^^受益良多
    想請問一下 "文章分類"右邊全展開跟全收合的箭頭要怎麼設定才會消失呢?謝謝!
    http://umicutedog.blogspot.tw/

    回覆刪除
    回覆
    1. 請參考WFU大網誌內的 "3.安裝「全部開合」功能"(綠字)
      你可能有加入這部分的字串更改才會多出全展開跟全收合的功能
      若有的話直接把這個地方恢復原狀即可
      我本身是跳過這步驟直接從"4.安裝主程式碼:"做更動

      刪除
  4. 謝謝您貼出的教學。想請問的是,我按照您的方法貼了,不知為何在文章分類下,分類清單一直跑不出來? 謝謝! http://shelleyen02.blogspot.tw/

    回覆刪除
    回覆
    1. 請問您有按照WFU大的文章流程更改嗎? 我這裡只是簡單提供操作的前置說明,若操作沒問題的話,可能再請你確認倒數第二張圖中標籤大分類的部分有沒有更改到囉^^

      刪除
  5. 「4.安裝主程式碼」

    這個沒有啊!還是要看別人的網誌來設定嗎?

    回覆刪除
  6. 我用完結果標籤就不見了……Orz

    回覆刪除
    回覆
    1. 步驟在第4個安裝主程式碼那邊就,按儲存之後,標籤就什麼都沒有了。

      刪除
  7. 加了圖更詳細了!!謝謝大大~~幫了我很大的忙TT

    回覆刪除