2009年1月20日 星期二

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


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

通常文章分類,在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語法要重新再裝上才能生效,有興趣的朋友可以試看看。

19 則留言:

  1. 你好嗎,我很笨,對blogger一竅不通,不知下面想法能不能實現:

    鼠標經過文字時浮現說明文字

    發帖或寫日誌時,鼠標經過文字能顯示像“谷歌翻譯”提示內容的效果:

    鼠標經過前:http://lh4.ggpht.com/_wuKJqZ8sgfo/SXtelD4IQUI/AAAAAAAAACQ/ubDnkZMRwro/s512/%E6%8F%90%E7%A4%BA%E5%89%8D.JPG
    鼠標經過時:http://lh5.ggpht.com/_wuKJqZ8sgfo/SXtekxXufAI/AAAAAAAAACI/cWFgVz4GjJA/s512/%E6%8F%90%E7%A4%BA.JPG
    彈出的文本框裡的內容是我事先編輯好的,要能夠設置字體,顏色等。

    回覆刪除
  2. 我只知道圖片可以設定alt或是title讓他浮現文字,文字部分我就不清楚了。

    回覆刪除
  3. alt或是title的方法之前我有試過
    效果不很理想,
    真希望能對浮出的文字進行修改!

    回覆刪除
  4. 或許要找找專業的css語法吧。

    回覆刪除
  5. 沒辦法耶>A<
    它還是一行沒有變兩行囧
    不知道是哪裡有衝突到還是...

    回覆刪除
  6. 你的.sidebar #tags li {
    有兩個不同定義,一個設130px,一個設70px,要砍掉一個吧。

    回覆刪除
  7. 恩刪掉一個了
    可是還是不行呢QAQ

    回覆刪除
  8. Jane,我想跟你的定義名稱有關吧,你的sidebar名稱是sidebar1,或許改成
    .sidebar1 #tags li {
    float:left;
    width:70px;
    }
    並將它放到#sidebar1 這區比較好吧,你好像亂放。

    回覆刪除
  9. 請問我的是這種的一樣可以改嗎http://wow-una.blogspot.com/2001/04/tags.html

    回覆刪除
  10. 你把分類放到文章裡,這個我不會,抱歉。

    回覆刪除
  11. 謝謝你.試了好久.我終於弄懂 CSS的程式碼要放在那裏.成功完成.感謝細心的教學文章

    回覆刪除
  12. .sidebar #tags li {
    float:left;
    width:70px;
    }


    請問一下這幾行要加在那裡,前面我都看的懂

    但這一步我看不懂,能不能再請你教我,謝謝^^

    回覆刪除
  13. 放在<head>與</head>之間即可,關於模版的配置,可參考Blogger template模板教學課程---概說及基本結構這篇解說。

    回覆刪除
  14. 綸太郎你好,

    照您的方法做了,只是分類還是沒有變成兩行,我現在已經改回來了。能夠麻煩你幫我看一下嘛?謝謝

    http://haoranngo.blogspot.com/

    tzuche

    回覆刪除
  15. 忘記選用電子郵件傳遞回覆,所以再留一次。
    thanks in advance.

    tzuche

    回覆刪除
  16. 我用你的模板裝,沒有問題,把.
    sidebar #tags li {裡面的
    width:70px;改成width:100px;
    會比較好,本來是出現三欄,改寬一點就會變成兩欄,應該是沒有問題的
    測試網頁請看
    http://luntailang.blogspot.com/
    你解決後請通知我,網頁我會刪除。

    回覆刪除
  17. 太郎兄,謝謝你!:)

    原來是因為我原先把width改為140太大了,才看不出效果。已訂閱你的部落格,會常來挖寶.呵呵.

    thanks,
    tzuche

    回覆刪除
  18. 成功就好,看起來很漂亮,謝謝您的訂閱。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能