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

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

下拉式文章分類

• 在實作以前請務必儲存完整範本。

承上段，實際需要更改的其實是標籤分類的部份：

新增標籤小工具（如果還沒新增）→儲存→選擇HTML→勾選『展開小裝置範本』

新增標籤小工具

點擊放大

選擇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>

兩者相異處就是在標記"紅色"的地方，看出來了嗎？ 呈現結果：

• 連結另開新視窗

這是一個範例===連結分類===TBA官網===連結再分類===凱特打結該該叫

• 連結原視窗開啟

這是一個範例===連結分類===TBA官網===連結再分類===凱特打結該該叫

如果你有邊欄落落長，又哪樣都不想割捨時，不妨試試看這個方式；可以有效節省版面空間又不必刪除任何項目喔！