Tuesday, July 14, 2009

Blogger技巧:添加导航栏

如果我们合理地利用Google  Blogger里提供的小工具,我们可以在博客中实现较为丰富的功能,比如我们可以利用Google Blogger里提供的小工具“链接列表” (Links Widget),来制作博客中导航菜单,这样不仅使用你的博客非常专业、易用性更好,而且今后无论添加菜单导航项还是调节导航项的顺序都将变得非常方便。 我们下文就以将导航菜单增加在博客标题区域之下为例,简单描述这个技巧:
查看技巧:在Blogger的首页动态输出文章摘要
1.实现鼠标经过菜单项时,菜单项的颜色可以变化突出。为使字体颜色和鼠标经过时的颜色可以在Fonts&Colors里修改,我们定义两个颜色变量(将下述代码加入模板的HTML代码的“变量定义段”中):
##CONTINUE##


2.定义导航菜单栏的样式,添加下列CSS代码到模板HTML代码中的“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: $menuTextColor;
}
#menubar a:hover {
background-color: $menuCornersColor;
}

3.在Html代码里添加下列加粗的红色代码到相应的区域,注意不要使用“扩展窗口小部件模板”功能,否则保存会出错:










4.保存模板。然后你就可以到“页面元素”(Page elements)里添加链接或到“字体和颜色”(Fonts&Colors)里修改相应的颜色了。

0 comments: