把你的blogger beta变成3栏

上一篇blog中提到了此blog终于实现了三栏（右边2小栏）的样式，根据Hackosphere的教程，其实并不难，但是由于那篇教程是全英文的，所以可能看起来比较费力，所以额把它简单的说一下。

1. 进入你的Template-Edit HTML.在下面的代码中找到
   
   

   #main-wrapper
   {
   margin-left: 0.8%;
   width: 52%;
   float: left;
   background-color: $mainBgColor;
   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
   {
   margin-right: 1%;
   width: 21%;
   float: left;
   background-color: $mainBgColor;
   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 */
   }

   的字样(红的字可能不一样).




2. 把你的代码中的那些部分改成和上面一样.




3. 在那些下面加入
   
   

   
   #sidebar-wrapper2
   {
   margin-right: 1%;
   width: 21%;
   float: right;
   background-color: $mainBgColor;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }

   
   红字一定要对啊.




4. 再在代码中找到<div id='sidebar-wrapper '>...</div>的字样
   
   
5. 在下面加入:
   <div id='sidebar-wrapper2 '>
   <b:section class='sidebar' id='sidebar2' preferred='yes'>
   <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
   </b:section>
   </div>
   
   
   
   
   
   保存,再到Page elements看看!
   
   
   
   

   大功告成!!

   
   
   其实大家可以发现,我的blog右边不仅有2小栏,在2小栏的上面还有一个较大的部分,是怎么实现的呢?其实上面的做法给你什么启示了吗?按照相似的方法试一下啊!
   
   

   如有问题,可以留言或发邮件到:aoyoo.po@gmail.com