两栏变三栏

这个教程就让你拥有两排Gadget栏

这是原本的模板

更改后就会变成这样

Example:(有两种版本)

首先你们在调整整体部落格的大小

Design-->Edit Html --> Ctrl+F 找到

#header-wrapper {

然后你再更改下面的红色代码

#header-wrapper {
  width:660px;  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

把660px换成100%

更改完后在Ctrl+F找到

#outer-wrapper {

然后再更改下面红色代码

#outer-wrapper {
 width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

把660px改成你要的90%或以上

再来又再Ctrl+F 找到 

#main-wrapper {

然后更改下面的红色代码

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;

 410px这是文章区大小你能自由选择...

我是用45%

完成后再Ctrl+F找到

#sidebar-wrapper {

更改下面红色代码

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden; 

220px这是Gadget栏的大小,一样的根据你的喜爱吧=]

我是用23%

更改完成后在#sidebar-wrapper { .....} 下面添加多一组代码

#newsidebar-wrapper {
margin-left:5%;
width: 23%;
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 */
}

Example:
margin-left:5%;
是gadget栏与gadget栏距离
调远点就不会黏在一起
我是用5%

红色的是根据自己的喜爱放吧...

这是第三Gadget栏的大小,我是用23%

把第三栏放在左边

Example:

Ctrl+F 找以下代码

想把第三Gadget栏放在左边就找

<div id='main-wrapper'>

然后在div id='main-wrapper'>的上面添加以下代码

<!-- new sidebar added-->
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Example:

然后再去Design --> page Element 把想移的移去左边吧=]

Example:

把第三栏放在右边

Ctrl+F找到

<div id='sidebar-wrapper'>

然后在<div id='sidebar-wrapper'>的下面添加以下代码

<!-- new sidebar added-->
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>

Example:

完成后保存再去Pages element 移gadget吧=]

Example:

完成啦=]

别忘记点击广告哦=]