Blogger / Blogspot 三欄的改法

感謝Hackosphere三欄式Beta教學﹐讓網的網頁也改成三欄式的了﹐
以下是如何改法：
第一個750px是你總網頁寬度﹐像我的是900px
400px+150px+150px+各margin=750px
這部份你自己須微調﹐紅色就是新增的第二個sidebar

先新增紅色的到#sidebar-wrapper 那是樣附近﹐
ps. 若是你像我一樣sidebar內有兩個的﹐記得也各自複製一個﹐可以用sidebar搜尋css 中式樣
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}

2.下面一段加在適當位置﹐

若你原來是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>要找到這個尾部才可以加入下面部份

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

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

Tags search:Blogger Beta

Filed Tags:Blogger_Beta