2007年8月9日

簡易更換Blogger的背景圖

最近時常在玩我的Blog,想儘辦法就是要讓自己的Blog與眾不同,但其實我並沒有學過CSS,也看不懂,只有學生時期簡單玩過一點點的網頁設計,現在想玩點不一樣的東西,就是上網去找一些高手,看人家的教學,但就算看人家的教學,也只是會東抄西貼的方式來玩,不過,看多了、抄久了,似乎也稍微知道怎麼做簡單的變化,慢慢的也想把自己的一些心得分享給大家知道。

常常看到其他Blogger的使用者,背景做的很漂亮,也希望能擁有一個屬於自己的背景畫面,可是當看不懂CSS,或是一堆程式碼看的眼花撩亂時,加上Blogger沒有內建換背景的功能,要怎麼自己換咧?這時不用會CSS,只要有一點點的網頁技巧(概念),就可以用圖法煉鋼的方式來做改變。

Step 1.

我所使用的是Dave Shea所建立的 Snapshot Sable範本,但總覺得背景還是單調了些,所以決定換上自己的背景圖。

Step 2.

首先我們到“範本-修改HTML”找到這段程式碼
/* -- basic html elements -- */
body {
padding: 0;
margin: 0;
font-size: small;
color: $textcolor;
background: #fff;
text-align: center;
}
#fff部分改成url('http://圖片來源位置.jpg') fixed left bottom no-repeat,記得最後的分號(;)不要漏掉。換完後,可以先儲存範本並重新瀏覽一下你的Blogger。

Step 3.

有沒有看到背景圖了,這樣其實已經成功了一半。雖然美美的背景圖已經放上去了,但還是有被文章欄的背景圖檔到,感覺還是怪怪的,這就要是完成剩下的一半,移除文章欄的背景圖。

Step 4.

此時將游標移到文章灰色的部份,按滑鼠右鍵,點選“檢視背景圖片(W)”。

Step 5.

這動作只是要知道文章欄背景圖的檔案位置,並複製這個網址。

Step 6.

再回到“範本-修改HTML”,利用尋找文字(Ctrl + F)功能,輸入剛剛複製的網址,找到這段程式碼。
background: #fff url(http://www.blogblog.com/snapshot_sable/bg-body.gif) 0 0 repeat-y;一整段刪除,儲存範本並重新發佈。

Step 7.

有沒有發現美美的背景圖不再被文章欄檔到了,這樣就完成屬於個人的背景圖囉!


老王的提醒:
1.修改前要習慣做備份的動作,備份好就大膽的試,就算最後整個失敗(搞亂)了,大不了按下“將迷你組件範本回復為預設值”,整個重來就好了。
2.在尋找程式碼時,可多擅用尋找文字(Ctrl + F)的功能,可省下不少時間。
3.各地高手如看到老王有哪些地方說明錯誤的,或是有更簡易的方式,請不吝指正,我會非常虛心接受您的指導。

17 意見:

Shortdaily 提到...

謝啦,我拿走啦^^

OldWangs 提到...

你"拿"走了??
怎麼拿啊??我看起來都好好的啊,沒有東西被拿走啊!
哈哈哈

如果對你有幫助,就是對我最大的鼓勵囉,謝謝.

Jin 提到...

我照做啦,可是要显示原分辨率该怎么弄呢?

翔羚 提到...

哇!
真的很用心哦~
我看得出你的用心!!
^.^


我暂时还不得空去处理...
><


如果我成功了!
我会第一时间回来谢谢你!!
=3

翔羚 提到...

我成了!
我成功了!
XD


谢谢你哦~
我真的很感激你..
真的很轻易就能更换!!
谢谢..谢谢!
aRik4†oR~

^.^

hello2388 提到...

我對以上的文有同感,只要大膽修改,多試就可以修改成功了。我來自Hello ! 空間

OldWangs 提到...

感謝你的光臨,對於網頁修改確實要大膽去做,功力才會慢慢進步。

V 提到...

OldWangs前輩你好,請問如果我想把"網誌文章"這個區塊拓寬的話該怎麼做呢?因為崁入的影片邊緣都會被切掉.
以貴站為例子,我想把區塊往左邊延伸,把空白區塊(情侶圖)填滿,請問該怎麼做呢?非常感謝:)

兔格格 提到...
作者已經移除這則留言。
兔格格 提到...

終於成功貼上去了, 可是圖卻太大了...囧

兔格格 提到...

呵呵~知道怎麼改了! 謝謝你分享如何改背景阿

OldWangs 提到...

恭喜你成功囉~

Naïva 提到...

不好意思! 我想請問一下..
我已經順利的貼上blogger的背景了, 可是背景的左右兩側並不如預期的貼上圖片.
因為我是兩欄式的,左右都有很大的空間,因此我想將左右都貼上圖片,不知道有沒有相應的語法呢?

Siu Kei 提到...

請問如果我是用圖片,而圖片是存放於電腦上,那body裡的background我剛如何更改?

匿名 提到...

您好:
請問一下您"浮動的網頁"(文章欄位動,背景不動的方法)如何修改HTML

感恩指教

匿名 提到...

我弄不到URL的代码。。。救命

maki 提到...

看不明白,
找不到你所讲的东西,
可以再教教我吗?