v 文章分類太長了嗎?教你將它變成兩行 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...