2009年8月3日 星期一

如何改造版面為三欄式


1. 新增
div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: right;
width: 20%;
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 */
}
更改 width main+sidebar+sidebar2=97%
2. 新增
< div id='sidebar2-wrapper'> < b:section class='sidebar2' id='sidebar2' preferred='yes' >
< b:widget id='CustomSearch1' locked='false' title='搜尋此網誌' type='CustomSearch'/ >
< /b:section >
< /div >
3. 原有的sidebar不能調整,將新增的sidebar2移到想要的位置.如下
< div id='sidebar2-wrapper' >
< b:section class='sidebar2' id='sidebar2' preferred='yes' >
< b:widget id='CustomSearch1' locked='false' title='搜尋網誌' type='CustomSearch'/ >
< /b:section >
< /div >

< div id='main-wrapper' >
< b:section class='main' id='main' showaddelement='YES' >
< b:widget id='HTML2' locked='false' title='' type='HTML'/ >
< b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'/ >
< /b:section >
< /div >
參考資料Fun new fun high http://www.skyvee.net/2007/07/blogger3column-blogger.html

沒有留言:

張貼留言