2009年1月22日星期四

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

收藏本文
收藏到

0 评论:

发表评论