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

2009/02/13

为Blogger添加导航栏(二)

字体大小:| |
之前的帖子里已经介绍过如何为Blogger添加导航栏,不过今天在老李的飞刀部落又发现了一个添加导航栏的方法。就个人角度将这个方法和我之前介绍过的方法比较一下:

优点:
1.添加起来更加方便:一步就行
2.更美观(演示|那个带有蓝色标签的导航栏)

缺点:
1.后期添加修改链接不方便——必须重新修改代码,没有之前的方法方便明了。
2.要定制导航栏的颜色的话,需要一定网页知识(我网页知识基本为零 T T)
3.有些模板的侧边栏会遮掉导航栏(比如我的演示,解决方法就是减少导航项)

下面来讲解方法(大部分直接复制老李的日志了,稍微修改了下):

布局---页面元素---添加小工具那里加入一个“HTML/JavaScript”,添加如下代码:

<style type="text/css">
.align-center{ margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */ width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ background:#ffffff; /* 背景色 */ text-align:center; /* 文字等内容居中 */ }

/*导航条,不是最上面那个东西,是下面主页、关于什么那里。*/
#navsite h5 {
display: none;
}
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navsite ul li a:link {
color: #448;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
</style>

<div id="navsite" class="align-center">
<h5>Site navigation:</h5>
<ul>
<li><a href="http://lukexzt.blogspot.com/">首页</a></li>
<li><a href="http://lukexzt.blogspot.com/search/label/%E8%B5%84%E6%BA%90%E5%85%B1%E4%BA%AB-%E5%85%8D%E8%B4%B9%E7%A9%BA%E9%97%B4">免费空间推荐</a></li>
<li><a href="http://lukexzt.blogspot.com/search/label/Blogger%E6%8A%80%E5%B7%A7">Blogger技巧汇总</a></li>
<li><a href="http://www.blogger.com/home">控制台</a></li>

</ul>
</div>


然后将该小工具拖曳到日志栏的上面。



注:
  • 如果不想让其居中(有些模板居中有问题)就去掉红色部分
  • 蓝色部分要改成自己的链接,想添加的话就按照相同的代码添加就行。
  • 如果粘贴好上面的代码测试时出现有的导航显示为“ li”的情况,就在代码里面把</li>中/li之前的空格去掉就行了。



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


收藏本文
相关文章:

0 评论:

发表评论

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