2007年1月25日

如何將你的Label做成Tabs(分頁)

在看了 [推薦] 53個你不能錯過的CSS技巧之後,我就馬上將其中一個Tabs放到我的Blog,原本只是用做成普通的Link,今天特地把Label轉成Tabs來用。

首先當然就是要選一個Tabs的樣本,至於樣本你可以在Free CSS Navigation Menu,「按右鍵、檢視原始檔」來挑選,也可以按這裡來選擇。
因為我想把Tabs放在Blog的header的下方,所以就要在header這個section增加一個widget,這樣才能加入Tabs。先在範本–修改Html(點選“展開小裝置範本”)尋找類似下方的原始碼: <b:section class="header" id="header" maxwidgets="1" showaddelement="no">
其中"maxwidgets"代表這個"section"能放多少個"widget",而"showaddelement"表示是否要在此"section"中顯示 [新增網頁元素]的連結。所以要將它改為:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
在加入之前有一個地方要修改一下,那就是圖檔的連結,這裡以TabsA為例:
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

  • tableft.gif 改為 http://exploding-boy.com/images/cssmenus/tableft.gif
  • tabright.gif 改為 http://exploding-boy.com/images/cssmenus/tabright.gif
你也可以將圖片另存新檔,再傳你的空間並修改圖片的位址。接著請改好後的CSS放在如下圖所示的地方:


接著再將下面的程式碼:
<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

放置到header這個section之內</b:widget>這一行的下方,存檔就可以了,以後新增加的Label就會自動出現在Tabs上面了。
UpData:2/01
感謝迷你機的提問,我才發現自已的疏忽。
當你選定自己想要的CSS樣式時,記得將上可面紅字的CSS樣式改為你自己所選定的樣式代碼。(例如:選擇Tab Menu I的樣式,將紅字部份改為tabsI
UpData:4/19
meiyu Hsiao問到要如何顯示Label的文章篇數?
只要在<data:label.name/>的後面加上(<data:label.count/>)即可。
延伸閱讀:
如何將你的Label做成Tabs(分頁)(續)

31 則留言:

  1. 真是語法邊修保證班耶!但有個疑問,幫標籤愈來愈多的時候,會變成什麼樣子呢?幾在一起?還是自動換行?

    回覆刪除
  2. TO Terry Lee:
    標籤愈來愈多時會自動換行。

    回覆刪除
  3. 改动的方法很多BLOG都写了 但是这里的简单明了~

    回覆刪除
  4. 請問標籤設定之後可不可以修改或刪除?怎麼修改或刪除?謝謝!

    回覆刪除
  5. To 天使媽媽~angela:
    Label可以在控制主頁內自行新增或修改刪除。

    回覆刪除
  6. 整個LABEL可以刪掉,但是其中某個標籤名字想改,例如:「blogger」想改成「部落格」,或是標籤太多,想重做整理,改怎麼改呢?

    回覆刪除
  7. Josh

    照著你的方法執行,但整塊分類標籤會直接搬移到上方,沒有出現tags效果。請問,是因為我是新版使用者才會無法出現嗎?謝謝!

    回覆刪除
  8. Josh

    可以了,可是看起來超怪的。Q_Q

    回覆刪除
  9. JOsh

    我投降了,可否到我的站台看看數值該從何處下手調動?感謝您!

    回覆刪除
  10. Josh

    啊......orz
    對不起,
    我又把它拿掉了,
    照著執行後,
    側欄的tags看起來也怪怪的,
    不麻煩Josh了,
    不好意思,
    佔了四格意見......orz

    回覆刪除
  11. To bluesky:
    最近忙得都沒時間更新Blog,不過我還是會抽空上來看留言,可以我看到你的留言時已經10點多了,沒幫到你真不好意思。

    回覆刪除
  12. 抱歉,根據您的教學已可以順利使用,但如何關閉點選標籤時出現的"是否開啟所有文章"??

    回覆刪除
  13. To Dreek_DON:
    不太明白你的問題,如果你指的是「顯示所有文章」這一行的話,這是回到Home的連結,為什麼要隱藏呢?

    回覆刪除
  14. Josh大:

    我的tab字體大小在FireFox下顯示怪怪的,
    無法從程式碼去改變大小,怎麼改都無作用。
    在IE 7.0就執行的很正常。

    可是,我用FireFox來看您的Blog,
    也沒有問題。可以請教您是什麼問題嗎??
    謝謝!!

    回覆刪除
  15. To Jiun:
    在#tabsH中的font-size可以調整字型大小,也可以在#tabsH ul內增加一個font-size來進行調整。

    回覆刪除
  16. Joseph你好,
    在你這學了很多,感謝!
    剛剛在試 Menu Tabs 時
    發現我的 Tab 裏面的字會折行
    讓畫面變得不整齊!

    如何才能像你的所有Tabs保持同樣高度?

    再次感謝!

    回覆刪除
  17. 補充一下,如上的的現象只有在 IE會造成文字折行 Tab 變高!
    如圖

    http://farm1.static.flickr.com/167/458479070_dad9e3d0de_o.gif

    但同樣用IE你的卻不會折行

    不知可否給我協助
    感謝!

    回覆刪除
  18. 問題解決了,真是高手 ^^
    非常感謝!!

    回覆刪除
  19. hi,Joseph
    我發現問題似乎出在我的 Label中用了"中文字"

    不知有無解法!?

    :-(

    回覆刪除
  20. To 戰地記者:
    其實問題是在是這個區塊的邊界設定,你可以修改在“#tabsB ul”中的padding來調整,將第四個屬性(代表左邊界)設小一點看看。

    回覆刪除
  21. 有將左邊界值設小
    這樣是可以在水平列多塞一些 Tabs,但是最右邊的tab如果還是中文字,就一樣會折行!

    此時我將原折行的Label 改成全英文且更長,就會正常的將該 Tab往下一水平列移動!

    中文折行問題暫時只好靠調整最右邊的 Label 下手,不過只要 IE Browser 調整 view的字型大小,又會變了!

    感謝你如此快的回覆!

    回覆刪除
  22. To 戰地記者:
    那試試修改#tabsB a span這裡的padding來調整span區塊的右邊界原先的設定是15px,加大看看。

    回覆刪除
  23. Hi, Joseph

    試過了,還是有折行問題!
    只有全英文的 Label 才會正常!

    :-(

    Have a nice sunday!

    回覆刪除
  24. To 戰地記者:
    那只好直接用大絕了,在「#tabsB a span」這增加一個「width: 75px;」,直接設定每一個分頁的寬度,75px如果不夠大就再增加,另外將「<div id='tabsB'>」改為「<div id='tabsB' align="center">」將文字置中,這樣才不會看起來偏一邊。

    回覆刪除
  25. 固定Tab寬度正好適用我用
    我的 Label 就是固定字數!

    感謝你花如此多時間協助
    我把 width訂 90px
    這樣在 View 的5種字級大小下
    只有 "最大" 的會超過折行
    但我相信應該沒有人會設定最大字級!

    感恩

    回覆刪除
  26. 請問 這些標籤上的label 可以像以前一樣有(篇數)ㄇ 例如:美食(5)
    謝謝

    回覆刪除
  27. To meiyu Hsiao:
    在widget的程式碼中,在“<data:label.name/>”的後面加上“(<data:label.count/>)”即可。

    回覆刪除
  28. 請問站長大大
    如何顯示說明字呢
    就滑鼠移過去..下面就會有字
    謝謝^^

    回覆刪除
  29. To Mark-Wang:
    因為這個widget是以Loop抓取Label的Name,要加入說明文字只能採用別的方法,你可以到這裡看看Lawrence的方式,尤其是他第五個步驟。

    回覆刪除
  30. 您好,我想請問一下,是否可以把
    "顯示具有xx標籤的文章。 顯示所有文章"

    這一段刪掉呢?

    回覆刪除
  31. Hey Josh
    想問問看要如何把labs移到中間
    發現到可以把labs移到右邊 float:right
    可是把試著移到中間 float:middle
    標籤就會跑掉
    有何辦法呢?
    thanks~~

    回覆刪除