刚建博没几天，对博客没有导航栏一直发愁，经过一番寻找，终于在瞎折腾的博客里找到了方法，经我试用感觉确实不错，现在分享与大家。
方法一：
1.进后台点击--布局--修改html--对扩展部件打勾，一定要先备份一下哟，以防不测。
2.查找：<head>
可以找到像Variable name 之类的一大堆定义的变量，在所有的变量定义之前加入如下代码：
<Variable name="headerTextColour" description="导航栏颜色"
type="color" default="#000" value="#006699">
<Variable name="headerCornersColour" description="导航栏鼠标经过颜色"
type="color" default="#000" value="#940f04">
3.在查找
</b:skin>
在其上面加入以下代码：
#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColour;
}
#menubar a:hover {
background-color: $headerCornersColour;
}
4.在找到：
<div id='main-wrapper'>
在其后面添加以下代码：
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList99' locked='true' title='Menubar' type='LinkList'/>
</b:section>
注：'LinkList99'中的数字设定为99是为了避免和其他的小部件编号冲突，可随意更改。
5.点击保存模板，(此时按预览是看不到导航栏的,要在布局 - 页面元素 -找到才加的小工具。在博客帖子上方，点击修改，在其中添加好一个导航项才能看到导航栏!)，可以随时到到“布局- 页面元素 -找到才加的小工具添加导航链接”。链接地址就是帖子的标签地址，假如你发的帖子标签为 google技巧，只需点击该标签复制地址就得了，以后发相关的帖子把标签射程一样的就行了，可以去google blogger google技巧看看。也可以到-布局--“字体和颜色”里修改相应的颜色了。
方法二：
此方法也是来自瞎折腾，本人只是整理了一下而已，
这个方法和我上面介绍过的方法相比较：
优点：
1.添加起来更加方便：一步就行
2.更美观
缺点：
1.后期添加修改链接不方便——必须重新修改代码，没有之前的方法方便明了。
2.要定制导航栏的颜色的话，需要一定网页知识。
3.有些模板的侧边栏会遮掉导航栏（解决方法就是减少导航项）
具体方法：
1.点击布局---页面元素---添加小工具那里加入一个“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>
2.如果不想让其居中（有些模板居中有问题）就去掉下面这两部分：
.align-center{ margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */ width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ background:#ffffff; /* 背景色 */ text-align:center; /* 文字等内容居中 */ }
class="align-center"
以下部分要改成自己的链接，想添加的话就按照相同的代码添加就行。
<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>
如果粘贴好上面的代码测试时出现有的导航显示为“ li”的情况,就在代码里面把</li>中/li之前的空格去掉就行了。
点击保存。
3.然后将该小工具拖曳到日志栏的上面。ok，一个漂亮的导航诞生了。再次感谢瞎折腾。
转帖请注明来自教你如何给blogger添加导航栏 - 独孤一剑的博客
中国2025社会热点大事记
3 天前
0 comments
发表评论