(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 技巧相關文章:
蠻不錯的~
回覆刪除只不過我每次想到都怕會拖累網頁速度所以都沒裝...
<4999025823951420020>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除是啊,會有點影響,不過chrome 感覺還好, IE 就...
我想問為甚麼我Blogger的游標沒有改變的 ?
回覆刪除<4828543879796032198>(以上內容請勿刪除,從括號之後開始留言)問問題時留下網址,我才能到你的網站看問題出在哪喔~
回覆刪除請看「一、構思」--> "由於希望保持部落格的背景,而 2 與 3 都很喜歡,忍痛刪除 1 的部分(少了游標效果)"
需要游標效果,把以下這一行補進程式碼就行了:
<link href="http://dl.dropbox.com/u/34007546/Xmas/Xmas.css" rel="stylesheet" type="text/css" />
<4828543879796032198>(以上內容請勿刪除,從括號之後開始留言)哈哈!Jacky,這些小事問我就好啦 XD
回覆刪除<568552612962152772>(以上內容請勿刪除,從括號之後開始留言)我想問怎樣刪去背景我想要游標圖案 , 不想要背景啊 ! 請指教 !
回覆刪除Blogger: http://ldg1935001.blogspot.hk/
<5427158841342770125>(以上內容請勿刪除,從括號之後開始留言)這篇的原始程式碼是從 mark 的文章來的,所以這一點你要問問 mark 囉~文章開頭有他的文章連結。
回覆刪除<665426283772641487>(以上內容請勿刪除,從括號之後開始留言)謝Wayne Fu !
回覆刪除<8277534501637743416>(以上內容請勿刪除,從括號之後開始留言)不客氣~
回覆刪除<5427158841342770125>(以上內容請勿刪除,從括號之後開始留言)有緣看到這段留言...
回覆刪除@Wayne, 其實這個 CSS 可以自行修改,先將 mark 的 css 檔下載,然後將背景那段程式碼刪除 (或是好像我這樣改掉那個背景圖片的網址),改好後再放到 Google Drive 便完工了 ^^
<2663401153427214027>(以上內容請勿刪除,從括號之後開始留言)看來你的功力 upgrade 了,要不要發篇教學文,驗收一下成果 ^^
回覆刪除<7686715604712950746>(以上內容請勿刪除,從括號之後開始留言)哈哈,這樣不算是 upgrade 吧~ ^^"
回覆刪除寫篇教學文教學怎樣改掉 mark 的懶人包,感覺好像不太好,而且這個動作應該不太複雜吧,嗯?
<7051350751209768210>(以上內容請勿刪除,從括號之後開始留言)我這篇也是改 mark 的懶人包啊,哈哈~
回覆刪除聖誕節過去啦 , 為何還不拆標題旁的裝飾呢 ?
回覆刪除<506325014185671797>(以上內容請勿刪除,從括號之後開始留言)街上的聖誕樹裝飾也還在啊~
回覆刪除