介绍一下怎样实现三栏的blogger模板

星期四, 十二月 13, 2007

基础知识：

beta的模版编辑分为layout和html两种。
在layout中模板分成：标题、博客文章、侧边栏、页脚4个部分。
同样在html中对应有

...外层

...标题

...内容

...帖子

...侧边栏

...页脚

这些模块对应的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 */
}
......

因为o们要做的就是在原有模板的基础上增加一个侧边栏，因此不需要太在意footer-wrapper。差不多可以开始了：

养成好习惯，给模板动手术前要记得备份！！！

1. 复制以下代码：

将其粘贴到

...前；

2. 删除其中的......部分，并将作如下修改：

3. 如果觉得有必要，可以将原来的

改为

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。

保存，看看结果还满意吗？