部落格聖誕節裝飾實作 (CSS 技巧)

(Pic from: xox520.blogspot.com)聖誕節到了來應應景，為自己的 Blogger 裝飾一下增添點節慶氣氛。+Mark X 整理了一個「懶人包工具」，不但容易安裝且設計精美、深具巧思，按下星星後不但會變色，還會隨機播放聖誕音樂。因此決定以此小工具為主體，來進行部落格的裝飾。

除此之外，以下的網址也能找到一些小裝飾：

http://bloggerstop.net/2009/12/decorate-your-blog-with-these-awesome.html


一、構思

+Mark X 的這個小工具，全部安裝的話包含以下幾種效果：

1. 背景、游標改變
2. 雪花效果
3. 花圈(含音樂播放器)

由於希望保持部落格的背景，而 2 與 3 都很喜歡，忍痛刪除 1 的部分(少了游標效果)，也就是把原安裝碼中的 <link href="http://dl.dropbox.com/u/34007546/Xmas/Xmas.css" rel="stylesheet" type="text/css" /> 這一行刪除。

這麼一來背景少了點氣氛，於是在網路找到兩個聖誕鈴鐺，放在網頁左上角及右上角，這樣感覺起來還過得去。因為這些裝飾只會擺幾天，所以先拍個照，效果類似下圖──

二、安裝程式碼

非 Blogger 的部落格需支援 javascript，把以下程式碼貼在想顯示之處。

Blogger 請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入(標題)、以下的程式碼：


儲存後可看到效果。


三、修改參數

以下行號請對照以上程式嗎──

A～D：此為原「懶人包工具」的程式碼

A：若範本裡已經安裝過 jquery，那麼本行可刪除。

B：花圈及音樂播放的程式碼

C～D：雪花的程式碼

E：

(1) 紅字 1600：可改為自訂的鈴鐺圖案寬度像素，我改成 80。此部分原理請參照「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」

(2) 藍字 top: 0px 代表左邊鈴鐺距離網頁頂端的距離
藍字 left: 0px 代表左邊鈴鐺距離網頁左邊界的距離，我改成 left: 20px 代表距離 20 像素。

(3) 綠字 top: 0px 代表右邊鈴鐺距離網頁頂端的距離
綠字 right: 0px 代表右邊鈴鐺距離網頁右邊界的距離，我改成 right: 20px 代表距離 20 像素。

以上是簡單的安裝及修改過程，提供一點 idea 給大家參考，相信大家都可以做出很好的裝飾效果。

CSS 技巧相關文章：