Blogger Hack Series: Blogger 範本修改心得(一)

雖然現在的範本的外覲上和舊的沒大分別，但實際上是由新的「範本設計工具」修改而成的。這個工具很方便，以前要直接修改html才能實現的東西(例:將範本改成三欄式、面版的寬度等)，現在都可以利用「範本設計工具」直接修改。對於初學者和沒有網頁編寫知識的人一大福音。(「範本設計工具」詳情可參考「驚為天人的Blogger templates官方模版終於測試推出」和「新版Blogger範本設計工具正式啟用」) 

一、更換背景圖
在套用了新範本之後，首要的工作就是將背景圖更換。由於新範本有不少改變，也增加了不少東西。所以，花了不少時間才成功換上背景圖。最近發現了一篇詳細+清晰的教學文章，想更換背景圖的人可以參考「如何置換新版部落格範本的背景圖案」。

二、將文章、側欄、footer的背景變成透明
要將以上的背景變成透明，大可利用透明png/gif去達成。但這樣做的話，在要修改背景顏色、欄的寬度時會很麻煩。所以，我選擇了body本身透明化。

首先在html中找出body這個定義，以我套用的範本為例:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

在這個定義上加上:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
filter:alpha(opacity=80)
opacity: 0.80;
}

這兩段程式碼是常用的透明化程式碼，其中「opacity: 0.80;」是主流瀏覽器用，而「filter:alpha(opacity=80)」則是IE專用。而後面的數字則是透明度(80 & 0.80=80%訪明度)。

加了程式碼之後，範本的一切都會透明化(就如本Blog一般)，當然包括所有文字和圖片......
所以，文字顏色、背景等的設定要花很多心思才能達到好的效果。否則，會做成閱讀困難的問題。

參考文章:「驚為天人的Blogger templates官方模版終於測試推出」
                 「新版Blogger範本設計工具正式啟用」
                 「如何置換新版部落格範本的背景圖案」

第二回:「Blogger Hack Series: Blogger 範本修改心得(二)