2006年12月29日星期五

在BLOGGER中增加第二个SIDEBAR

BLOGGER中如果你选择的是一个两栏模版,那么大量的外部调用你必须要全部放在SIDEBAR里边,最后造成侧栏高高耸立,在WORDPRESS中,很多发烧友设计的模版都会在文章底部集成一部分侧栏功能,通过一番演练,其实通过简单步骤就可以轻松增加新的SIDEBAR。

研究后台代码,发现SIDEBAR是通过类似代码展现的:
<div id='sidebar-wrapper'>这是侧栏装载器声明<b:section class='sidebar' id='sidebar' preferred='yes'>这是侧栏属性声明<b:widget id='BlogArchive1' locked='false' title='所有文章' type='BlogArchive'>这是内容模块声明。

好了,我们通过以上代码发现,如果你需要在BLOGGER中增加一个新的模块,那么你需要有新的装载器,新的属性声明和新的内容声明。装载器可以通过CSS来实现,定义一个新的块,包括颜色,大小,宽窄等,而属性声明可以直接拷贝原内容后略作更改,内容模块声明则是通过在后台的页面设置中增加新的页面同时设定必要的标题和内容。比如我博客底部的SIDEBAR1,代码如下:

<div id='bottom'>新的底部装载器,需要在CSS中增加,这里主要设定他的宽度和高度及背景色。
<div id='sidebar1'>拷贝SIDEBAR的代码,很轻松就实现。<b:section class='sidebar1' id='left-sidebar' preferred='yes'>继续拷贝,唯一需要注意的是修改名称以免出现重复。<b:widget id='HTML2' locked='false' title='My Recent Posts' type='HTML'>这个可以在模版页面设置中增加,这里代码显示我增加的是一个HTML/JS的新内容。剩下的都可以拷贝原侧栏代码,注意结束标记的一一对应即可大功告成。

思路总结:构思你页面中需要放置新SIDEBAR的位置,构思你装载器的色彩,宽窄及样式;根据构思写装载器CSS代码;在HTML页面中增加装载器<DIV>,抄袭原代码中的侧栏属性;在页面设置中增加新标题内容;不断调试直至彻底完工。喜欢跟代码折腾的同志,就折腾,其实折腾本身还是很有乐趣的。参考文章:BEAUTIFULBETA

发布禾草唐楷 禾草唐楷镜像

没有评论: