[教學] 我的Blogger 有三個欄位了!! Blogspot 三欄式的改法

From: Polin Wei

　　看到別人的網頁都有三個欄，今天也來讓自己的網頁也改成三欄式吧，以下三欄式的改法：

1. 第一個是決定你網頁的總寬度，我是用 99% ﹐50%(#main-wrapper )+20%(#sidebar-wrapper )+22%(#newsidebar-wrapper )+各margin=99% 這部份你自己可以先計算一下
PS: 當然你也可以用 px 來作設計, 但因為我懶得作計算, 所以用 % 比較方便

2. 新增一個 sidebar (#newsidebar-wrapper )下面紅色標識的，就是新增的第二個sidebar
PS: 你可以複製 #sidebar-wrapper 的 css 樣式, 然後改名為 #newsidebar-wrapper , 注意: 不能同時有兩個 #sidebar-wrapper , 不然會出錯的

#outer-wrapper {
width: 50%;
...
}
#main-wrapper {
width: 50%;
margin-$startSide: 1%;
...
}
#sidebar-wrapper {
width: 20%;
margin-$endSide: 0.5%;
...
}
#newsidebar-wrapper {
width: 22%;
margin-$endSide: 0.5%;
...
}

3.在 <div id="main-wrapper"> 與 <div id="sidebar-wrapper"> 中間加入<div id="newsidebar-wrapper"> 就像下面

<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>

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

接下來你到Page element就可以看到第三欄出來了﹐若把各顏色變數字形變數也新增的話﹐以後你在這Fonts & Colors 就可以直接調整。


參考文獻:
Aqua , A-V and BSD Blogger - Blogspot 三欄的改法
Hackosphere三欄式Beta