三步驟更換Blogger的背景圖

這個月來對修改自己的 Blog 產生了興趣，雖然並不熟識 CSS，總想自己的 Blog 與眾不同。在部落格裡找到不同的文章和方法，大都是左抄右抄的，但現在我都可以修改簡單的變化。

看到其他Blogger的使用者，很多背景都造很漂亮，總想自己也擁有一個靚背景。由於Blogger沒有內建換背景的功能，又看不會一堆程式碼，只好先備份，一點一點的修改，最後終於成功了，小小心得給大家分享。(本人所使用的範本是Rounders 4)

要更換Blogger的背景圖，其實只要修改幾個簡單的地方就可以了，先要到'版面配置/修改HTML'

在尋找程式碼時，可多擅用尋找文字(Ctrl + F)的功能
1.先找到以程式下碼

body {
background:#fff;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

將#fff部分改成url('http://圖片來源位置.jpg') fixed left bottom no-repeat，記得最後的分號(;)不要漏掉。換完後，可以先儲存範本並重新瀏覽一下你的Blogger。

如果看到背景，已經成功了一半。因為還有文章的背景擋着，始終都不大好看的。只要完成以下的修改，去除文章背景便可了。

2.再回到“範本-修改HTML”找到以程式下碼

#main-wrap1 {
width:745px;
float:$startSide;
background:$mainBgColor url("http://www.blogblog.com/........gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}

將 background:$mainBgColor url("http://www.blogblog.com/........gif") no-repeat $startSide bottom;一整段刪除，儲存範本並重新發佈。看看背景圖不再被文章欄檔到了，這樣就完成屬於個人的背景圖囉！

但如果有用到頁底的工具欄，那就要多造一個步驟了，因為底欄同樣有背景的。

3.再回到“範本-修改HTML”找到以程式下碼

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:#191919 url("") no-repeat $startSide top;
color:$titleTextColor;
}

將 background:$mainBgColor url("http://www.blogblog.com/........gif") no-repeat $startSide bottom;一整段刪除，儲存範本並重新發佈。這樣就完成整個屬於個人的背景圖囉！