更改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的地方,看看是不是已經可以靠著側邊欄了?不行的話就表示改的地方不對,那就繼續回頭找繼續改!

Blogger網誌更換漂亮的佈景主題（５）修改小細節－CSSViewer

當我們到了某個網站，想了解它的各部位元件的程式碼時，可以啟動CSSViewer這個工具，啟動的方法很簡單，就是到＂工具＂－>＂CSSViewer＂點一下，它就會啟動，這時你的滑鼠游標移動到哪，它就會顯示該位置的元素及設定資訊，如下圖，那麼，我們只要記下來再配合＂ＣＴＲＬ＋Ｆ＂組合鍵，就能輕易的修改程式碼。

Blogger網誌更換漂亮的佈景主題（３）修改小細節-好用的工具

一般我們的作業系統內建上網的工具是IE瀏覽器 ，這邊我們來使用一個不同的瀏覽器－ＦIＲＥＦＯＸ，它的優點是有多的擴充元件可以下載，這讓我們在上網時非常方便，例如上大陸網站，就可以下載同步簡體 翻成繁體的套件，或者像我們要檢視網頁的程式碼就可以下載程式碼的檢視套件，這個可以擴充的特性使的它目前市佔率已經超過微軟的ＩＥ了！
可以到這可以到這　http://www.moztw.org/
如果不知道要去什麼地方下載，可以在任何搜尋引擎輸入關鍵字＂ＦIＲＥＦＯＸ＂也能輕鬆找到。
下載之後就安裝起來，安裝完你可以啟動用用看，還滿好用的瀏覽器。

接著，我們要替他安裝這次要用的擴充工具CSSviewer，這個工具可以幫助我們很多辨識出網頁版面上的物件是屬於哪個元件代碼，這樣我們在修改ＨＴＭＬ的時候就不用找到頭昏眼花。
一樣，到搜尋引擎去搜尋＂CSSviewer＂或者從這裡https://addons.mozilla.org/zh-TW/firefox/addon/2104　
選擇＂安裝到Forefox＂。
選擇立即安裝。
重新啟動瀏覽器。
從工具列的＂工具＂有看見這個套件的話就完成了。