2006年9月23日 星期六

(非固定式)把Blog設為三欄

原文請參考此篇連結
研究了一些Blogger網站的三欄式都發現會有一個缺點,一般來講最佳瀏覽模式是1024x768,不過如果在比較大尺寸的螢幕上顯示的話會出現側欄離螢幕邊框太遠,例如我的螢幕是1152x864就會變成下圖一樣
(點擊圖片可看原圖)

如果是在FrieFox的瀏覽器上看的話,在設定裡的位置也會偏移,IE則不會有這種情況


修改詳細步驟如下:
1.進入Customize (自定) > Template(範本) > Edit(修改) HTML > 把 Expand Widget Template(展開小裝置範本)打勾

2.先修改紅色的部份到#sidebar-wrapper 附近幾個wrapper﹐(outer是總寛度,main是中間欄位,siderbar是側欄),增加一個#newsidebar-wrapper,outer-wrapper的width可以刪掉,主欄跟側欄的百分比可以自己調整,不過加起來不要剛好100%要保留一點空間,像我的是45%+26%+26% = 97%

#outer-wrapper {
width:
margin:0;
padding:5px;
...
}

#main-wrapper {
width: 45%;
margin-left: 2px;
...
}


#sidebar-wrapper {
margin-right: 2px;
width:
26%;
float: right;
...
}


#newsidebar-wrapper {
margin-left: 2px;
width: 26%;
float: left;

...
}

3.把下面紅色部份加入適當位置
<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在右邊﹐則放在main-wrapper上面
<div id='newsidebar-wrapper'>....
<div id='main-wrapper'>....
<div id='sidebar-wrapper'>....

若你原來是sidebar在左邊,則放在main-wrapper下面
<div id='sidebar-wrapper'>.....
<div id='main-wrapper'>..... </div>(要找到這個尾部才可以加入)
<div id='newsidebar-wrapper'>.....
Related Posts Plugin for WordPress, Blogger...