Blogger / Blogspot 三欄的改法

Blogger並沒有提供三欄式的樣式，但是我們可以做點修改添增。
三欄式的面板挺方面的，尤其在是Sidebar很多東西的時候。

以下是如何改法：
第一個750px是你總網頁的寬度，400px+150px+150px+各margin=750px
這部份必須自己調整，新增的第二個sidebar以紅色表示。

先新增紅色的到#sidebar-wrapper 那樣式附近：
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}


再來將下面一段加在以下CSS碼相關位置：
<div id="'main-wrapper'">
...
...
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

而相關位置因人而異：(其實這只是讀取順序！)
如果你原來是sidebar在左邊，則排列順序：
<div id='sidebar-wrapper'><div id='main-wrapper'><div id='newsidebar-wrapper'>
如果你原來是sidebar在右邊，則排列順序：
<div id='newsidebar-wrapper'><div id='main-wrapper'><div id='sidebar-wrapper'>
當然你也可以像我一樣擺在同一邊：
<div id='main-wrapper'><div id='sidebar-wrapper'><div id='newsidebar-wrapper'>

測試結果，其實上面的方法只是讀取順序。
真正想要將sidebar放在哪一邊，應該要去修改 #main-wrapper #sidebar-wrapper #newsidebar-wrapper之中的：
float: right;

接下來你到網頁元素就可以看到第三欄出現，若把各顏色變數字形變數也新增的話，以後你在這Fonts & Colors 就可以直接調整。

參考自Aqua , A/V and BSD的Blogger / Blogspot 三欄的改法 。