Blogger-Beta Hack之“导航菜单式的分类”

8"O"又去偷师了，结果就是现在新的界面效果。将分类移到页面的上方，显示成浏览器标签页（导航菜单）的风格。有点儿意思吧？直接进入正题，看看怎样一步一步实现这个效果。

1. 选择导航菜单的样式
如果你选择8"O"-Beta上这种样式，可以跳过此步骤。也可以从下面的11种样式中挑选适合你blogger风格的导航菜单。

感谢exploding boy免费提供这些导航菜单。点击下载所有样式的导航菜单，

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样式
如果你和8"O"一样选择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>
开香槟庆祝吧！

Tags: blogger beta blog nav menu hack 导航 菜单 技巧 分类