为Blogger添加导航栏

在网上寻寻觅觅,找到了简单的为Blogger添加导航栏的方法,效果(本Blogger或演示)还不错,既方便，区域划分也变得清楚了，最重要的是能根据自己的Blog配色方案进行调整,如此以来便可以放心大胆的去掉Blogger自己的导航栏了。

步骤——

1.进入后台的“修改HTML”，记得备份模板！

2.定义两个颜色的变量，为的是让字体颜色和鼠标经过时的颜色都可以在“布局”中里方便的修改。

查找 Variable name 可以找到一大堆定义的变量，在所有的变量定义之前加入

<Variable name="headerTextColour" description="导航栏颜色"
type="color" default="#000" value="#006699">
<Variable name="headerCornersColour" description="导航栏鼠标经过颜色"
type="color" default="#000" value="#940f04">

3.添加CSS以定义导航栏区域。

查找 } 可以找到一大堆CSS代码，在任意一个 } （推荐最后一个 } ）后回车再起一行，加入

#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.在Html里相应的区域加入

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList99' locked='true' title='Menubar' type='LinkList'/>
</b:section>

注：加入此代码的位置将决定导航栏的位置，请自行寻找位置添加,多试试就掌握规律了。Luke是放在

<div id='main-wrapper'>

下面一行的。
红色的数字是设定为99是为了避免和其他的小部件编号冲突，可随意更改。

5.保存模板之后(此时按预览是看不到导航栏的,要在布局中添加好一个导航项才能看到导航栏!)就可以到“布局”里添加链接或到“字体和颜色”里修改相应的颜色了。

收藏本文