文章分類太長了嗎?教你將它變成兩行

在部落格的編排裡，文章分類通常是常常的一串，佔用相當長的版面，如果你的邊欄元素不多，或許可撐些場面，感覺部落格豐富許多，但每個格主的要求不同，有人喜歡簡潔、有人喜歡掛滿各式小元件，這時網路上相關功能就能視自己需要而派上用場了。

通常文章分類，在Blogger很棒的部份是利用標籤Tags來分類，而非傳統的Label，所以一篇文章可以使用很多個標籤，但相對的他沒有一個大分類底下再加上小分類的功能，如果從其他BSP搬家過來的朋友可能比較不能適應，很多人喜歡層層疊疊的，像俄羅斯娃娃一樣，不過我個人是覺得太複雜，其實都只是習慣問題，其實用tags是比較正確的，方便網友搜尋相關的文章，但有的人會濫用，造成搜尋的負擔也是不好的，就看自己的喜好。

在在文章分類的部份最常利用的就是標籤雲（Label Cloud）Hacks功能，詳細情形可參考將Blogger Beta的Label作成Label Cloud或是增強標籤分類功能: 標籤雲 (Label Cloud)，這在綸太郎之前寫的使用的Blogger Hacks資源網站有提到過，另外也有人將他以折合式的方式呈現，按下【+/－】來展開/縮起文章分類，以求畫面的簡潔，可參考讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)一文，而我要介紹的是不用使用Hacks的JavaScript語法就能達成的，也讓網頁減少載入Hacks的負擔，讓一長串的文章分類能夠變成兩行，讓畫面簡潔一些，也讓閱讀者較能在一個頁面上迅速找到自己想看的分類。

做這個變動之前，建議放標籤、Lable的欄位要寬，至少250px到350px之間甚至更寬，除非你的標籤是英文或是短短的幾個中文字，否則以180px寬度來容納兩行標籤，會有種太擁擠的感覺，我以東京封印為例，本來是一長串的文章分類，

更動之前，首先也需備份你的模板，進入blogger後台→修改HTML→勾選展開小裝置範本，找到以下這一行，
<b:widget id='Label1' locked='false' title='文章分類' type='Label'>
或是label1這個關鍵字，按下ctrl+F，就會跳出搜尋框。
如下圖，

看到下面的
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

如圖

將
<ul>改成<ul id="tags">
再將
<span dir='ltr'>(<data:label.count/>)</span>
置換成以下這行
<data:label.name/> (<data:label.count/>)
(<data:label.count/>)，代表的是這個分類的文章數量，如果不想顯示可以拿掉。
因為我們在上面增加了一個id為tags，所以要在css裡追加這個tags的定義，
.sidebar #tags li {
float:left;
width:70px;
}

寬度就視你的邊欄寬度除以2，大概再減20px左右，譬如我的欄位為430px，我的寬度設定為190剛好可容納，可以自己慢慢調整，如果你的欄位更寬，譬如600px，寬度你設180px，也可將分類弄成3行的情況，如下圖


另外如果你的標籤會重複出現兩次，如下圖，我的東京封印網站，記得將


<data:label.name/> (<data:label.count/>)
前面的
<data:label.name/>移除，只剩(<data:label.count/>)
即可，這是我自己測試的結果，因為每個模版的結構有些不同，所以還是要自己找到問題點慢慢修正，因為我測試過另一個網站並沒有這種情形，而是正常的執行。

最後記得，如果你將新增小工具裡的標籤移除後，要重新放上標籤時，上面的html語法要重新再裝上才能生效，有興趣的朋友可以試看看。

參考來源：
Blogger のラベル(タグ)を2列で表示させる itFun.jp