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空下来了再和你切磋）。
Joost邀请
需要的朋友可以点击下面的链接留名。
2006-12-07
怎样实现三栏的Blogger Beta模板
| del.icio.us
| yahoo
[ TOP ]
订阅：
博文评论 (Atom)
选择阅读器订阅本站
4 [圈阅]:
IE下不行
IE下右侧边栏消失的问题已经解决，
原因是这篇帖子中多了一个span class="fullpost"这个标签
粗心大意的说
为什么总是提示我？
“XML
XML The element type "div" must be terminated by the matching end-tag "”
新版模板下载已放出，请参考这里
发表评论