Blogger的导航菜单

做完beta的导航菜单后很想给blogger也做一个。仔细研究了一下代码，发现在blogger上实现导航菜单，似乎比beta上更简单，更灵活（不搬家了）。大致的步骤和beta版的导航菜单是一样的：

1. 选择导航菜单的样式
如果你选择和8O一样的样式（tabsF），可以跳过此步骤。或者下载所有11种样式的导航菜单，从中挑选适合你blogger风格的导航菜单。


2. 添加CSS样式
下面的代码是8O选择的F样式，复制下面的代码，粘贴到CSS样式表的最后（</style>标志前）
/*- 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代码复制到上述位置。

3. 最关键的一步（特别感谢8O）
<div id="header">
<h1 id="blog-title">
<a href="<$BlogURL$>" style="font-weight:bold; color:#0A409A;">
<$BlogTitle$>
</a>
</h1>
<p id="description"><$BlogDescription$></p>
…………
</div>
用下列格式的代码替换“…………”
<div id='tabsF'>
<li><a href="url1"><span>Tag1</span></a></li>
<li><a href="url2"><span>Tag2</span></a></li>
…………
</div>
OK!beta需要5步完成的工作，在blogger上只要三步就搞定，而且你可以随意调整每个Tag的顺序，更重要的是你可以在此放任一链接，使其显示在每页的顶部（不像beta只能显示分类名，且Tag顺序无法调整）。呼！上帝也休息的日子，8O也去放松一下！

Tags: blogger nav bar tag style css hack menu blog 导航 菜单 分类 标签 技巧 心得