Blogger 三欄式設計

為了將 Blogger 由二欄式作成三欄式, 實在有夠不容易的,

以下是我修改的 HTML 範本內容 :
 程式碼
#main-wrapper {
margin-$startSide: 1%;
width: 54%; /* 調整大小 */
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

#sidebar-wrapper {
margin-$endSide: 18%; /* 調整位置 */
width: 26%; /* 調整大小 */
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

#right-sidebar-wrapper { /* 自訂一個新的 sidebar-wrapper */
position: absolute;
top: 90px; /* 調整高度 */
left: 81%; /* 調整位置 */
width: 18%; /* 調整大小 */
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

然後, 找出下面的程式碼 :
 程式碼
<div id='sidebar-wrapper'>
...
</div>

在其之後, 加上下面的程式碼 :
 程式碼
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

這樣即可.

最後, 介紹一個不錯的網址, 裡面有很多 Blogger 三欄式範例 :

網址 : http://www.bloggerbuster.com/2007/08/blogger-template-downloads.html
天聖經:神的心不僅在神的聖言當中,也在神所創造的萬物之中,天涯海角每一處都有神的心
Related Posts Plugin for WordPress, Blogger...