文章分類以Menu按鈕顯示在上方

感謝 Góc học trò / Hoctro's Place介紹﹐讓Beta多一顯示功能﹐其中用到Exploding-boy的Menu Css﹐你可以按進去看一下﹐選好你要的類別.例如如下

像我的網頁﹐因結合Hackosphere的標題伸縮功能﹐所以就更棒了﹐若要請參考這裡。

第一步：下載CSS 樣本Css Navigation

第二步：編輯你的HTML範本﹐使用Extendable widget,讓最上面標替那塊可以新增元件
<b:section class="header" id="header" maxwidgets="1"
變成這樣
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
ps.這一步是為了最上面區塊﹐若是選擇文章那一塊﹐這一部就可以不用做


第三步:在你的Page Element中﹐新增Labels,


然後再拉到文章那上面(若你有進行第二步﹐就可以拉到標題那去)


第四步：放在你的HTML 範本中</script>之前

開始：
/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

結束

最後一步：修改Label 那區塊﹐讓它像下面樣子﹐每個人這一塊不一定相同﹐但
<b:widget id='Label1' locked='false' title='' type='Label'>這一行及最後一行</b:widget>找出來﹐這塊蓋過去就好。有人有裝兩個文章分類的﹐可能就會是Label2﹐或Label3﹐自己判斷了。
原來的樣子


<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<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>

最後若是出來按鈕按了沒有反應﹐就先僅留一個分類區塊﹐你原左右邊的那塊先刪掉。

:Blogger Beta

:Blogger_Beta