扩展Blogger版面宽度的方法

在剛建立好Blogger時,會發現顯示頁面不夠寬,預設顯示頁面只有660的寬度而已(根據所選原始模版不同,各別可能的預設值也會不同)。如果想要加寬頁面顯示寬度的話,就得動手改一改了。
按下Blogger的『版面配置』頁籤
再按下其下的『修改HTML』頁籤
若對HTML語言及CSS語法沒有把握,可以按下『下載完整模版』,先將現有模版儲存在自己電腦中,以便將來處理錯誤要復原時使用。
要復原模版,可以在『從硬碟的檔案裡上載模版』右方文字格中輸入自己電腦中的完整模版儲存路徑,或按右方『瀏覽…』鈕進入挑選。最後,再按『上載』鈕即可。
『展開小裝置範本』 核取盒,現在用不著,故,可以暫不理它。
在下方HTML碼中,找到下面段落,並將紅色字處改掉(以下內容,可能會因原始所選模版不同,而有所差異,找到大致類似位置修改之即可)。
下面者,原預設是660,視所需顯示頁面大小將之更改:(当前版本已不存在这一宽度定义)

/* Header
———————————————–
*/

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

下面者,預設為700,此處可不改。:(当前版本已不存在这一宽度定义)
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1040px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

下面者,預設為660。
/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

下面為文章內容的寬度設定,預設為410。
#main-wrapper {
width: 750px;
float: $startSide;
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的寬度,預設為220。我沒改,要改的話,要注意與上方main-wrapper者之加總,不可超過Outer-Wrapper之寬度設定。
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
改完後,按下下方的『儲存範本』鈕即可。
按下『檢視Blog』連結,即可發現顯示頁面加寬了。

更多