回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/05/02

为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.jsscriptaculous.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瞎折腾

收藏本文
相关文章:

9 评论:

匿名 说... 回复此评论

你的侧边栏的确很好看 O(∩_∩)O~

Luke 说... 回复此评论

@banana谢谢香蕉的赞美,哈哈。

徐建群 说... 回复此评论

我感觉:觉得这篇文章不错?赶紧收藏吧! 这一部分很实用,可以告诉我怎么加上去的吗?xujianqun@gmail.com
最好把你的代码发给我

独孤一剑的博客 说... 回复此评论

你太牛了 跟你真是学了不少。谢谢!!
还有请教以下,在博客怎么发带代码的文章啊?

Luke 说... 回复此评论

@徐建群你可以参考以下两个网站:
http://www.addthis.com
http://fairyfish.net/2008/01/19/bookmark-share-plugin/

韩乾 说... 回复此评论

@独孤一剑的博客把代码里的“<”改成“<”,“>”改成“>”即可。不带引号。

韩乾 说... 回复此评论

XD……直接转换了……
是& l t ;和& g t;

Luke 说... 回复此评论

@独孤一剑的博客分别用“& l t ;”和“& g t ;”(去掉之间的空格)分别替换“<”和“>”就能发布出代码了。

Luke 说... 回复此评论

@Sandlong哈哈,楼上先回答了。

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。