blogger：导航菜单式的分类

1. 选择导航菜单的样式
可以从下面的11种样式中挑选适合你blogger风格的导航菜单。
点击下载所有样式的导航菜单。
2.添加Label这个页面元素（page element)
如果不是新注册的blogger-beta用户，应该已经在侧边栏上添加了Label。可以跳过此步骤。
没有Label的朋友，可以在可视化模板编辑中添加页面元素，选择Label。
3. 扩展Header
在模板HTML编辑中找到以下代码（友情提醒：更改模板前先备份）： <b:section class="header" id="header" maxwidgets="1" showaddelement="no">将其更改为： <b:section class="header" id="header" maxwidgets="2" showaddelement="yes">保存模板后回到可视化模板编辑，将Label从侧边栏拖放到原来的Header下。
4. 添加CSS样式
如果你选择F样式，那么复制下面的代码，粘贴到CSS样式表的最后（"]]>"标志前）。 /*- 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;
}上述代码中的图片来自Ramani的网站，你也可以将图片放到自己的blogger上，然后更改图片位置。

如果你选择其他样式的导航菜单，则将相应的CSS代码复制到上述位置。
5. 最关键的一步（特别感谢Hoctro）
找到下面的代码： <b:widget id='Label1' locked='false' title='your label title' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a Label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>将其替换成：<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> 开香槟庆祝吧！
转自8个圈圈的Blogger