2012年12月1日 星期六

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

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

Wayne Fu 0 A+

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

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

http://www.widgetbox.com/tag/christmas
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 技巧相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP