2012年12月24日

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

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 技巧相關文章:

15 則留言:

  1. 蠻不錯的~
    只不過我每次想到都怕會拖累網頁速度所以都沒裝...

    回覆刪除
  2. <4999025823951420020>(以上內容請勿刪除,從括號之後開始留言)
    是啊,會有點影響,不過chrome 感覺還好, IE 就...

    回覆刪除
  3. 我想問為甚麼我Blogger的游標沒有改變的 ?

    回覆刪除
  4. <4828543879796032198>(以上內容請勿刪除,從括號之後開始留言)問問題時留下網址,我才能到你的網站看問題出在哪喔~

    請看「一、構思」--> "由於希望保持部落格的背景,而 2 與 3 都很喜歡,忍痛刪除 1 的部分(少了游標效果)"

    需要游標效果,把以下這一行補進程式碼就行了:

    <link href="http://dl.dropbox.com/u/34007546/Xmas/Xmas.css" rel="stylesheet" type="text/css" />

    回覆刪除
  5. <4828543879796032198>(以上內容請勿刪除,從括號之後開始留言)哈哈!Jacky,這些小事問我就好啦 XD

    回覆刪除
  6. <568552612962152772>(以上內容請勿刪除,從括號之後開始留言)我想問怎樣刪去背景我想要游標圖案 , 不想要背景啊 ! 請指教 !

    Blogger: http://ldg1935001.blogspot.hk/

    回覆刪除
  7. <5427158841342770125>(以上內容請勿刪除,從括號之後開始留言)這篇的原始程式碼是從 mark 的文章來的,所以這一點你要問問 mark 囉~文章開頭有他的文章連結。

    回覆刪除
  8. <665426283772641487>(以上內容請勿刪除,從括號之後開始留言)謝Wayne Fu !

    回覆刪除
  9. <8277534501637743416>(以上內容請勿刪除,從括號之後開始留言)不客氣~

    回覆刪除
  10. <5427158841342770125>(以上內容請勿刪除,從括號之後開始留言)有緣看到這段留言...
    @Wayne, 其實這個 CSS 可以自行修改,先將 mark 的 css 檔下載,然後將背景那段程式碼刪除 (或是好像我這樣改掉那個背景圖片的網址),改好後再放到 Google Drive 便完工了 ^^

    回覆刪除
  11. <2663401153427214027>(以上內容請勿刪除,從括號之後開始留言)看來你的功力 upgrade 了,要不要發篇教學文,驗收一下成果 ^^

    回覆刪除
  12. <7686715604712950746>(以上內容請勿刪除,從括號之後開始留言)哈哈,這樣不算是 upgrade 吧~ ^^"
    寫篇教學文教學怎樣改掉 mark 的懶人包,感覺好像不太好,而且這個動作應該不太複雜吧,嗯?

    回覆刪除
  13. <7051350751209768210>(以上內容請勿刪除,從括號之後開始留言)我這篇也是改 mark 的懶人包啊,哈哈~

    回覆刪除
  14. 聖誕節過去啦 , 為何還不拆標題旁的裝飾呢 ?

    回覆刪除
  15. <506325014185671797>(以上內容請勿刪除,從括號之後開始留言)街上的聖誕樹裝飾也還在啊~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。