2009/6/4

[教學]自訂Blogger標籤分類為下拉式選單

天有網友在[拯救破落格]新手必備之Blogger Hack大全的文章底下留言提問我部落格中下拉式文章分類的作法;其實這兩個分類都是Blogger內建的功能,分別是網誌存檔標籤。網誌存檔的部份就是依照發文日期作彙整的分類方式,blogger原始的網誌存檔小工具即有下拉式選單的選項;標籤分類的部份雖然系統原來沒有下拉式供選擇,我只是把呈現形式依照我的部落格配色做了點小變化,設定的方式亦會陳述於下文。(參照下圖)


凱特打結 下拉式 blogger

下拉式文章分類

  • 在實作以前請務必儲存完整範本。
承上段,實際需要更改的其實是標籤分類的部份:
新增標籤小工具(如果還沒新增)→儲存→選擇HTML→勾選『展開小裝置範本』
新增標籤小工具 blogger

新增標籤小工具

點擊放大
勾選『展開小裝置範本』

選擇HTML,勾選『展開小裝置範本』

利用ctrl+F找到 <b:widget id='Label1' locked='false' title='Labels' type='Label'> (若找不到就掐頭去尾留中間Label1這樣找找看類似區段) 確定有這段程式碼才表示在後台的設定成功,整段碼應該如下:
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
桃色部份直接以下列語法覆蓋,另可自訂寬度顏色等,範例語法已標示進去囉。 如果無須自訂,就把style='width: 寬度(例:"160px");background-color: 背景色碼(例:"#ffffcc"); color: 文字色碼;'這一段刪掉即可。
<select onchange='location=this.options [this.selectedIndex].value;' style='width: 寬度(例:"160px");background-color: 背景色碼(例:"#ffffcc"); color: 文字色碼;'> <option>選單標題(就是我的"按月分一下"和"標籤分一下")</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'> <data:label.name/> (<data:label.count/>) </option> </b:loop> </select>
預覽看看,標籤是不是變成下拉式的啦?確定成功就可以儲存囉! 同樣也可以隨意設定自己想置放在部落格中的任何連結分類,例如『友站連結』,範例如下
連結另開新視窗 <select onchange="window.open(this.options[this.selectedIndex].value)"> <option value="">這是一個飯粒範例</option> <option value="">===連結分類===</option> <option value="連結網址(如:http://tba.tw)">連結名稱(如:TBA官網)</option> <option value="">===連結再分類===</option> <option value="http://katejane12.blogspot.com/">凱特打結該該叫</option> </select> 連結原視窗開啟 <select onchange="location.href=this.options[this.selectedIndex].value;"> <option value="">這是一個飯粒範例</option> <option value="">===連結分類===</option> <option value="http://tba.tw">TBA官網</option> <option value="">===連結再分類===</option> <option value="http://katejane12.blogspot.com/">凱特打結該該叫</option> </select>
兩者相異處就是在標記"紅色"的地方,看出來了嗎? 呈現結果:
  • 連結另開新視窗
  • 連結原視窗開啟
如果你有邊欄落落長,又哪樣都不想割捨時,不妨試試看這個方式;可以有效節省版面空間又不必刪除任何項目喔!

17 則留言:

  1. Hi, 只是發現有誤來說一下, 你的教學圖要教大家加入標籤 你圈成Blogger標誌了!! 只是這樣~ 呵

    回覆刪除
  2. 哦哦!謝謝分享 ^^
    我終於可以把落落長的標籤清單縮起來了 !

    回覆刪除
  3. @Frances 阿娘威XD

    謝謝~趕快改正^^"

    回覆刪除
  4. 好耶,好實用的教學:)

    回覆刪除
  5. 大姐頭 超熱心的
    每次都幫大家整理教學

    回覆刪除
  6. 謝謝大家不棄嫌^^

    回覆刪除
  7. 歹勢!現在才發現原來也是 Blogger,我之前已經用轉連結將 "凱特打結-分享 plurk theme." 引用到 blogger 和 eyny 網誌中,請多包涵.
    cencat99 blogger

    Eyny 網誌.

    現在來學"下拉式"label,感謝提供!!

    回覆刪除
  8. @ 施主,這個問題可能要問你自己喔XD

    回覆刪除
  9. Hi.可不可以教我怎么像你那樣,把月份貼在標簽上面?就是希望它們是在同一個Widget里面。謝拉。可以加我MSN直接告訴我嗎?b-iiatch@live.com ~

    回覆刪除
  10. 你好
    因為你的教學我終于學會了=V=
    哈哈
    不過有一點想請問你,就是如何更改選單的大小呢?

    因為不會截圖
    所以直接丟地址給你XD

    http://yizestar.blogspot.com/

    這是我的部落,旁邊的選單我嫌它太小了
    看不太見(笑)

    謝謝你丫:D

    回覆刪除
  11. 嗨咯

    想請問你我把選單弄好了可是卻嫌它的字太小了==
    請問是因為blogger template的問題麼?
    請問有什么方法改善不?


    謝謝你:D

    回覆刪除
  12. 謝謝分享,但想請教一下要如何不顯示每個標籤的文章數*´◒`*?

    回覆刪除
  13. 您是否打算在亚马逊网上购买产品。在您购买产品之前,请访问我们的网站,了解如何选择最佳产品。

    For More Information Visit Here -- 最适合宿舍用的床垫

    回覆刪除