Blogger 三欄式設計

為了將 Blogger 由二欄式作成三欄式, 實在有夠不容易的,

以下是我修改的 HTML 範本內容 :

 程式碼

#main-wrapper {
  margin-$startSide: 1%;
  width: 54%;            /* 調整大小 */
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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-$endSide: 18%;  /* 調整位置 */
  width: 26%;            /* 調整大小 */
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}
 
#right-sidebar-wrapper { /* 自訂一個新的 sidebar-wrapper */
  position: absolute;
  top: 90px;             /* 調整高度 */
  left: 81%;             /* 調整位置 */
  width: 18%;            /* 調整大小 */
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}

然後, 找出下面的程式碼 :

 程式碼

<div id='sidebar-wrapper'>
...
</div>

在其之後, 加上下面的程式碼 :

 程式碼

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

這樣即可.

最後, 介紹一個不錯的網址, 裡面有很多 Blogger 三欄式範例 :

網址 : http://www.bloggerbuster.com/2007/08/blogger-template-downloads.html