11月30日在8个圈圈的Blogger上做了一个有关三栏模板和两栏模板的民意测验,结果如上。看来喜欢三栏模板的还是多数,那就介绍一下怎样实现三栏的blogger模板。
基础知识:beta的模版编辑分为layout和html两种。
因为o们要做的就是在原有模板的基础上增加一个侧边栏,因此不需要太在意footer-wrapper。差不多可以开始了:
在layout中模板分成:标题、博客文章、侧边栏、页脚4个部分。
同样在html中对应有
<body>
<div id='outer-wrapper'>...外层
<div id='header-wrapper'>...标题
<div id='content-wrapper'>...内容
<div id='main-wrapper'>...帖子
<div id='sidebar-wrapper'>...侧边栏
<div id='footer-wrapper'>...页脚
</body>
这些模块对应的CSS样式信息为
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
......
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
......
养成好习惯,给模板动手术前要记得备份!!!
1. 复制以下代码:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
......
</div>
将其粘贴到<div id='main-wrapper'>...前;
2. 删除其中的......部分,并将作如下修改:
<div id='l-sidebar-wrapper'>
<b:section class='sidebar' id='l-sidebar' preferred='yes'/>
</div>
3. 如果觉得有必要,可以将原来的
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
......
</div>
改为
<div id='r-sidebar-wrapper'>
<b:section class='sidebar' id='r-sidebar' preferred='yes'/>
......
</div>
4. 回到CSS部分,将
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
改为
#l-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#r-sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
5. 最后一步啦,因为增加了一个侧边栏,需要将原来的out-wrapper的长度从660px改为880px。
保存,看看结果还满意吗?
PS:
@冰山:这篇文章应该可以回答你的第2个问题,第1个问题请参考Blogger-Beta Hack之“导航菜单式的分类”和Beta Hack之“导航菜单式的分类”——扩展版,第3个问题:o每次都是手动添加一些相关文章。还没有看到过比较理想的自动添加相关文章的方案,一旦有了一定向大家介绍。
@avx:看了你推荐的文章,太复杂了,而且要用到js脚本,懒得尝试了。建议使用o向冰山推荐的方法(给个要分层的理由先,o空下来了再和你切磋)。
8个圈圈的Blogger
2006-12-07
怎样实现三栏的Blogger Beta模板
[拟稿] 8O @ 09:26 | del.icio.us | yahoo [ TOP ]
[标签]: beta技巧
订阅:
博文评论 (Atom)
4 [圈阅]:
IE下不行
IE下右侧边栏消失的问题已经解决,
原因是这篇帖子中多了一个span class="fullpost"这个标签
粗心大意的说
为什么总是提示我?
“XML
XML The element type "div" must be terminated by the matching end-tag "”
新版模板下载已放出,请参考这里
发表评论