【Blog】Blogger的版面配置

再次回應Cellocoffee網友的的詢問，這次是要說明怎麼把blogger template的寬度增加，以便縮短文章的長度！



首先，要先弄清楚blogger版面的四個基本配置，包括Outer-wrapper, Header, Main-wrapper和side bar，而要改寬度的話，就是更改這四項的寬度即可！

首先，更改Outer-wrapper的寬度，在template中找到以下的HTML code：

#outer-wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
font: normal normal 100% Helvetica, Arial, sans-serif;
background: #fff url(http://www.blogblog.com/snapshot/bg-body.gif) 0 0 repeat-y;
}

將紅色的700改成你所想要的寬度即可，通常大家的螢幕解析度都設為1024x768，所以我是設為1000px。

要注意的是，header的背景是和outer-wrapper一樣寬的，如果還是使用目前的背景圖的話會有一部分是空白，如果想要換掉Header的背景圖，就從以下的地方換！

#header-inner {
background: transparent url(http://www.blogblog.com/snapshot/header-01.gif) bottom left no-repeat;
}

接著是Main-wrapper的寬度：

#main-wrapper {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 404px;
}


我大概是改成680px左右！

除了改main-wrapper的寬度，相對應sidebar寬度也要跟著改。

#sidebar {
float:right;
border-top: solid 1px #fff;
padding: 4px 0 0 7px;
background: #fff;
width: 264px;
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 */
}

這個要比outer-wrapper的寬度減掉main-wraper的寬度小一點，不然會被擠到下面去，所以我大概是設成280px！

如此一來，整個blog就變寬不少啦！當然這些設定要慢慢調才能調到自己最喜歡的配置囉！