Loading...
主页
Blogger模板Blogger: 怎样实现三栏的Blogger 模板
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。
保存，看看结果还满意吗？
Power by WOW派™
较新的博文
1 评论:
slimming capsule for menopausal women have mushroomed in the online market in recent years. As a woman approaches menopause the hormonal changes taking place in her body tend to affect her metabolism. Slower metabolism makes it difficult for the body to burn up the energy, causing calories to be converted into fat molecules.