將Blog Template改成三欄

Blogger預設的範本多是兩欄式的，我選擇的Stretch Denim也是兩欄，參考了Shiou's Notepad－增加第二個側邊欄位的作法，稍稍變動一下程式碼，就可以改成三欄了。

Step 1:將原有的側邊欄位定義成右側邊欄位
找到
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
換成
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
找到
#sidebar-wrapper
換成
#right-sidebar-wrapper

Step 2:增加一個左側邊欄
找到
<div id='main-wrapper'>
在之前增加
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>

Step 3:增加及定義左側邊欄位的寬度和格式，可以直接複製#right-sidebar-wrapper{}修改。
#left-sidebar-wrapper {
margin-left: 1%;
width:20%;
float: left;
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 */
}

Step 4:修改主欄位和右側邊欄位的寬度
#main-wrapper {
margin-left: 2%;
margin-right: 2%;
width: 54%;
float: left;
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
{
margin-right: 1%;
width: 20%;
float: right;
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 */
}

Step 5:在【範本 | 網頁元素】（Template/Page Elements）中檢視效果，並搬動部分網頁元素到左邊欄位。

資訊來源: http://shiouhhc.blogspot.com/2007/08/template.html