更改blogger 部落格版面區塊寬度

不管是內建的版面範本，或是經由下載而來的樣式範本，我們有時候還是會想要做一些寬度方面的調整，尤其是官方內建的範本，在中間主要的區塊部分有點太窄，而現在ＬＣＤ的解析度普遍較寬，這樣會下兩側一大片的空白，現在我們來把版面改成符合我們需求的寬度。

1.用"新標籤"或者"新頁面瀏覽"的方式進入後台,到"版面配置"項目"修改HTML"。

2.回到我們的網誌首頁,啟動CSS Viewer工具,這樣我們要修改哪裡直接用看的,比較方便。

3.我們要修改的是中間這一段,有點窄,我們要把它改寬,將滑鼠移到中間的部份,這時會顯示這個區塊叫做content-wrapper,目前寬度是760px。

4.切換到到後台,為了保險起見,記得先儲存備份,以免搞砸,接著一起按鍵盤左下角的"CRTL"鍵及字母"F"(Ctrl+F),啟動瀏覽器的搜尋功能,這功能可以讓我們找到在這個頁面裡的任何符合我們所輸入的關鍵字,這樣可以省去很多找的時間,
在搜尋欄位輸入我們要找的區塊名稱-->content-wrapper。

5.如果有找到,就會顯示出來。

6.在width的部份,原本寬度760px,改成我們要的寬度,這裡我們改成900px(單位不要刪掉),然後用新標籤或是新視窗的方式預覽,確定OK以後就儲存。

7.回到網誌的首頁,content-wrapper(文章+側邊欄的容器)區塊已經變寬了,但實際上容器變寬,這兩個部份還是維持原本的寬度,而且上面的header部分也維持原來寬度,所以我們還得連這些地方更改,繼續用CSS Viewer來看這些位置的名稱,繼續改。

8.再到後台,輸入關鍵字,找到上欄位的標籤名稱"header-wrapper",我們發現顯示寬度width:760PX的地方在"#header"這裡,那就將他的760px也改成跟content-wrapper一樣的寬度900,接著重複預覽確認和儲存的動作...
網誌標題的欄位跟中間的部分一樣寬了!

9.這時我們經由CSS viewer的檢視可以看出,容器寬度由原本760px變為900px,但文章和側邊欄加起來其實沒那麼寬,尤其我們加寬版面通常是為了文章部分的寬度可以寬一點,如果只是容器變寬,對我們沒有意義,只是多出一段空白的間隔,所以我們要把文章部分的版面加寬,經由CSS Viewer顯示的標籤名稱是main-wrapper,寬度是464px,猜猜看,這多出來的一段空白的寬度是多少?猜出來之後,就把464px改成464加上這個答案的寬度即可。（除非你的側邊欄也有要改變寬度，那麼這段寬度就要由兩邊分享了～）

10.猜出來了沒?這個空白處寬度答案是140,(900-760),進入後台,重複剛剛的步驟-->搜尋-->更改寬度-->預覽-->儲存.......

11.回到網誌首頁,用CSS Viewer確認,main-wrapper的地方,看看是不是已經可以靠著側邊欄了?不行的話就表示改的地方不對,那就繼續回頭找繼續改!