到过不少BLOGGER都带有导航栏, 很漂亮, 也很方便. 前几天Gfans讨论关于BLOGGER模板样式问题的时候, 也谈到了这个导航栏的问题, 有人说这个导航栏其实就是CSS+DIV的应用, 并不复杂. 于是搜索了一下, 自己也做了这么一个导航栏.
可能还有其他BLOGGER们对这个也很有兴趣, 下面就简单说一下如何添加这个导航栏.

先你可以到网上搜索一些CSS导航栏的素材下载过来, 或者你也可以点击这里下载我这篇日志中用到的一些导航栏.

载后, 解压到任意文件夹中. 双击"Menus"打开网页预览一下这些导航栏的效果.



选一个你喜欢的样式, 并记住样式上面的名称编号, 然后把你选择的导航栏所需要的两个图片, tableft?和tabright?(?是字母, 比如你选择的是样式F, 那么就是tableftF和tabrightF)上传到你的FTP或者flickr等图片储蓄空间.

着, 在资源管理器中右键单击"Menus"那个网页文件, 在"打开方式"中, 选择用记事本(或者其它你喜欢的文本编辑器)打开它.


开后你会在记事本中看到这些样式的源代码, 其中, 以"/*"开头, 以"*/结尾的是注释部分, 在注释中查找你所选样式的源代码, 并做适当修改. 比如宽度, 高度, 背景颜色等... 需要特别注意的是代码中所用到的两个图片tableft?.gif和tabright?.gif, 需要修改成你刚刚上传到服务器的地址, 如果你上传的是和你BLOG相同服务器的FTP空间, 那么可以写成相对路径(类似"../images/tableftF.gif"), 如果你是上传到flickr等图片储蓄空间, 那么需要写成绝对路径(类似"http://farm1.static.flickr.com/123/456.jpg"), 不过无论你是哪种情况, 我都建议你写成绝对路径, 免得以后麻烦.

改好代码以后, 可以先保存, 然后在本地刷新刚刚打开用来挑选样式的窗口, 可以看到修改后的样子, 满意后, 复制刚刚修改好的代码, 把这段代码粘贴到你BLOGGER模板的《style type="text/css"》到《/style》中间. 然后回到刚刚用记事本打开的"Menu"文件中, 在下边查找你所选样式的对应DIV标签. 比如你选择的是样式F, 那么你就要找《div id="tabsF"》开头的代码,把代码中对应的Link 1, Link 2...等等名字和链接地址换成你的, 然后复制《div id="tabsF"》到《/div》的代码(包括这两句). 并回到BLOGGER模板的代码中, 粘贴到你想放置导航栏的地方.
注: 此段文字中所出现的"《"和"》"分别代表英文半角的小于号和大于号.


OK, 粘贴好以后, 可以点击预览查看一下, 满意后, 点击保存, 并重新发布BLOG就可以了.

果有任何问题, 欢迎留言或来信. 我会摘着我会的给大家回答. :P

By The Way: 明天就是大年三十了, 预祝大家在新的一年里, 阖家欢乐, 身体健康, 学业有成, 工作顺利. :)

文章发布于 13:41 标签: , , , . 评论RSS 订阅: 博文评论 (Atom) .

7 评论

有个软件叫CSS Tab Designer,里面自带很多tag样式,很傻瓜化。

netboy新春快乐:)

oh~oh~ 多谢KEY的祝福, 也祝KEY兄新年行大运, 万事大吉, 身体健康! :)

好是好看,就是不知道放什么地方好。

麻烦你,帮忙把我的链接地址更新一下
改称最普通的那种。
http://yeti-blog.blogspot.com
谢谢哦

貓貓新年快樂~~~~~~~~~~~~~~我們因為SPACE已經搭伴過了三個春節咯!!!!!

发表评论