自适应模板的定义及添加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