Blogger beta技巧：添加导航栏

以前我们把标签做成导航，尽管那个Hack也可以添加一些自定义的按钮，但似乎不太方便。这次我们直接得用Blogger beta里的Links Widget来制作导航，无论添加还是调节顺序都将变得非常方便。这里我们将它添加在标题之上，如果添加在标题下，需要调节Header-wrapper的大小，或者再定义一个区域。(via Hans)

1.为了让字体颜色和鼠标经过时的颜色都可以在Fonts&Colors里方便的修改，我们先定义这两个颜色的变量。

<Variable name="headerTextColor"
description="headerTextColor"
type="color" default="#000" value="#006699">
<Variable name="headerCornersColor"
description="headerConersColor"
type="color" default="#000" value="#940f04">

2.添加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: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}

3.在Html里添加相应的区域，即红色的代码。

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

4.保存模板之后就可以到Page elements里添加链接或到Fonts&Colors里修改相应的颜色了。