自适应模板的定义及添加Widebar

修改前备份模板。不同的模板情况可能不同,根据实际情况修改,下面的内容仅供参考。

什么是自适应模板?不同的电脑显示器的大小不一样,因此我们的Blog在不同的显示器上显示的效果也是不同的。有的模板把Blog的宽度设为具体的某一值,这样在所有的显示器上所显示出来的样式是一样的。但是,我们也可以让BLog自动适合显示器的大小。如本Blog。

自适应模板的宽度是以百分数来定义的,不像固定模板一样是固定的数值。更改也很简单,预先计算好各个区域的大小,再修改为百分值即可。

Widebar这里指的是跨越两个侧边栏的宽度的侧边栏,当然,首先你有两个侧边栏。Widebar是在两个侧边栏之上或之下的一个新的区域。下面的示例中我们将定义一个Widebar。

Bloggeruniversity为例,这个Blog包含了四部分,两个Sidebar,一个Widebar,另一部分是文章区域(main-content).

整个浏览器的所有显示区域为100%,下面我们先从总体上来分配一下各部分的宽度。

左边距:5%

右边距:2%

中间部分:93%(包括文章区域,两个侧边栏,一个Widebar)

然后我们来详细分配“中间部分”各部分的区域分配。

文章区域:50%

左侧边栏:22%

右侧边栏:22%

余下的6%留作侧边栏之间的空白

因为Widebar在两个侧边栏之上或之下,所以它的宽度为两个侧边栏之和:44%。

1.先在CSS里定义Widebar区域的样式。

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

2.在页面中添加Widebar区域。找到<div id='main-wrapper'>(不同模板中此区域名字可能不同,如可能叫“content-wrapper”),添加下面代码以添加区域,无须选中扩展代码。

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

现在再回到“页面元素”就会发现多了一个区域。

via BloggerUniversity

3 条评论:

任平生 说...

这个挺不错,窗口小的时候,也会自动调整

高鸡瘟 说...

怎么样把blogger升级到新版的blogger,或者用google帐户合并到旧版的。。旧版的不支持google帐户的登陆,新版的不支持blogger的登陆。。即使是邀请也不可以。。郁闷!

GG 说...

给showr.blogspot.com 加个链接吧~~