2010年3月19日 星期五

將Blog Template改成三欄

Blogger預設的範本多是兩欄式的,我選擇的Stretch Denim也是兩欄,參考了Shiou's Notepad增加第二個側邊欄位的作法,稍稍變動一下程式碼,就可以改成三欄了。

Step 1:將原有的側邊欄位定義成側邊欄位
找到
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

換成
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>

找到
#sidebar-wrapper
換成
#right-sidebar-wrapper

Step 2:增加一個側邊欄
找到
<div id='main-wrapper'>
在之增加
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>


Step 3:增加及定義側邊欄位的寬度和格式,可以直接複製#right-sidebar-wrapper{}修改。
#left-sidebar-wrapper {
margin-left: 1%;
width:20%;
float: left;
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 */
}


Step 4:修改欄位和側邊欄位的寬度
#main-wrapper {
margin-left: 2%;
margin-right: 2%;
width: 54%;
float: left;
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
{
margin-right: 1%;
width: 20%;
float: right;
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 */
}


Step 5:在【範本 | 網頁元素】(Template/Page Elements)中檢視效果,並搬動部分網頁元素到左邊欄位。

資訊來源: http://shiouhhc.blogspot.com/2007/08/template.html

1 則留言:


  1. This is a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it
    PCAP Touch Screen

    回覆刪除