精美小巧的垂直导航栏

一直想弄个好看点的导航栏，以前的版面只适合水平导航栏，而且不是很漂亮。以前看到Kaie's Blog的导航栏很别致，垂直贴在页面的旁边，不占地方而且很实用，所以一直想用这种导航栏，但受版面限制。现在我改动了版面，就比较适合那种导航栏，于是就立刻开工，移植它的导航栏。

现在我改版面都是用Firebug这个火狐插件，看到好看的东西，用Firebug一分析就知道如何实现，特别快，不用向以前要看源文件，找了半天，都没头绪。下面看我如何把它应用到我的Blogger上。

1.备份你的模板，不用多说了。
2.这个导航栏一般会放在头部，于是我就要在“header-wrapper”里添加一个“section”用于导航栏，方便日后编辑。在“header”上面添加下列代码
<b:section class='Manubar' id='Manubar' maxwidgets='1' showaddelement='yes'/>这段代码最好放在“header”的上面，我试过放在下面，容易引起版面的混乱，不好调整。
现在保存模板，就可以在“页面元素”里看到在“标题”的上面多了一块，这就是导航栏的位置。

3.不管这个，先定制一下导航栏的样式。把下面代码放在CSS中的任意位置
#Manubar {
margin-left:-36px;
position:fixed;
text-align:left;
width:40px;
}
#Manubar a img {
opacity:1;
}
#Manubar a:hover img {
left:5px;
opacity:0.8;
position:relative;
top:0px;
}
#Manubar img {
margin-bottom:-6px;
}这个样式是我版面上的，大家可以自由改动，适合自己的版面。

4.最后要做得，就是给导航栏添加实质性的东西了。在页面元素中，给你的导航栏添加一个widget，填入如下代码
<span>
<a title="主页" href="bryant0315.blogspot.com"><img src="http://bryant0315.googlepages.com/homepage.png" class="Manubar" alt="Homepage"/></a>
<br/>
<a title="关于我" href="http://www.blogger.com/profile/00666980370660107722"><img src="http://bryant0315.googlepages.com/aboutme.png" class="Manubar" alt="About Me"/></a>
</span>

代码要用包围着，里面就是要显示的元素。比如“主页”，前面是链接，后面是图标，这都是Html的固定格式，只要加一个class="Manubar"就可以了。其它的就以此类推，想加什么就加什么，很方便。

大概步骤就是这些，很简单，完成的效果就是我博客里所展示了，最左边的垂直导航栏看到了吗，还是挺好看的。大家也来试一试吧！