为Blogger添加浮动透明的竖向导航条

最近访问Luke瞎折腾时有没有感觉到变化？呵呵，相信你一定看到了左侧那个会随页面一起滑动的透明竖向导航条吧？其实很多Blogger都有这种导航图标，那么这种效果是如何实现的呢？参考了Fun New Run High的方法，发现其实也不是很难，不过如果想拥有个性的浮动图标，的确需要折腾一番时间哦（时间主要花在挑选图标、获得图标地址、修改代码上面，单纯的Hack用时很少。）

下面就来看看这种功能是如何实现的吧——

1.挑选用于导航栏的图标，这里提供了很多漂亮的图标，你可以下载自己喜欢的图标然后上传到自己的网络相册获得图片地址备用。当然如果你想让导航图标独一无二的话也可以自己制作。（Luke在这步花了很长时间- =）

2.控制台-布局-修改HTML，备份一下模板以备不测，勾选“扩展窗口小部件模板”。

查找：

]]></b:skin>

先在其上添加以下代码：

/*-- smallnav--*/
#smallnav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #smallnav{ /*IE only*/
position:absolute;
}
#smallnav a img{
opacity:0.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#smallnav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #smallnav a img{
filter:alpha(Opacity=100);
}
#smallnav img{
margin-bottom: 5px;
}
* html .smallnav{
margin-bottom: 7px;
}

代码中红色部分定义了导航栏的位置，请根据自己的模板样式自行调整。

然后再在]]></b:skin>之下添加以下代码;

<script src='http://bloggertips.googlecode.com/files/prototype.js' type='text/javascript'>
</script>
<script src='http://bloggertips.googlecode.com/files/scriptaculous.js?load=effects' type='text/javascript'></script>

可以发现这个代码中使用了外部的js文件（蓝色部分），一般来说共用是没用问题的，如果你不放心怕它突然哪天不能使用了，可以下载（prototype.js、scriptaculous.js）下来，然后上传到自己申请的可以外链的免费空间或免费网络硬盘上（个人推荐Google提供的GoogleCode），然后在代码中换成自己的地址。

3.查找

<div id='outer-wrapper'>

在其下添加以下代码：

<div id='smallnav'>
<span>
<a href='http://lukexzt.blogspot.com/' style='border:0;' title='回到首页'><img alt='回到首页' class='smallnav' height='32' src='http://youke.googlecode.com/files/folderhome2.png' width='32'/></a>
<br/>
<a href='http://feed.feedsky.com/Lukexzt' style='border:0;' title='订阅Luke瞎折腾'><img alt='订阅Luke瞎折腾' class='smallnav' height='32' src='http://youke.googlecode.com/files/rsslogo.png' width='32'/></a>
<br/>
</span>
</div>

将其中：
绿色部分换成自己的导航链接
紫色部分换成自己的导航说明（鼠标停留在图标一段时间后会显示）
橙色部分换成自己在第1步获得的图标地址
如果想加更多的链接，就按照格式来添加吧，格式是：

<a href='导航地址' style='border:0;' title='导航说明'><img alt='导航说明' class='smallnav' height='32' src='导航图标地址' width='32'/></a>
<br/>

注：由于每个模板不同，有些Blogger在添加好这步的代码后会在使用IE浏览器浏览时出现“导航图标错位到屏幕中间而不是左侧”的情况，如果遇到这种情况，请尝试将上面的代码添加到

<div id='main-wrapper'>

或其他代码之后，预先备份模板，然后多试试，一定会成功的。



-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

收藏本文