Joost邀请

需要的朋友可以点击下面的链接留名。 Joost™ the best of tv and the internet
本博因故暂停更新。请重新订阅或访问8个圈圈的Blogger

8个圈圈的Blogger

2006-12-07

怎样实现三栏的Blogger Beta模板


11月30日在8个圈圈的Blogger上做了一个有关三栏模板和两栏模板的民意测验,结果如上。看来喜欢三栏模板的还是多数,那就介绍一下怎样实现三栏的blogger模板。

基础知识:

beta的模版编辑分为layout和html两种。
在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 */
}
......
因为o们要做的就是在原有模板的基础上增加一个侧边栏,因此不需要太在意footer-wrapper。差不多可以开始了:

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

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空下来了再和你切磋)。

4 [圈阅]:

匿名 说...

IE下不行

8O 说...

IE下右侧边栏消失的问题已经解决,

原因是这篇帖子中多了一个span class="fullpost"这个标签

粗心大意的说

匿名 说...

为什么总是提示我?
“XML
XML The element type "div" must be terminated by the matching end-tag "”

8O 说...

新版模板下载已放出,请参考这里