如何將你的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（分頁）（續）