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里修改相应的颜色了。

3 条评论:

Siqing 说...

你好,
不是很明白 1变量 和 2CSS 项添加在哪里?
第3项红色部分理解。
谢谢!

Ziyan Zhang 说...

最终的menubar不能和主体对齐,总是靠在页面最左边,不知如何修改?~

Griya Vimax Asli 说...

Jual Vimax Di Makassar, Jual Obat Kuat Viagra Di Makassar, Jual Obat Klg Di Makassar, Jual Hammer Of Thor Di Medan, Jual Obat Cialis Di Makassar, Jual Minyak Lintah Oil Di Makassar, Jual Obat Forex Di Makassar, Jual Titan Gel Di Makassar, Antar Gratis COD Langsung