Aspirant à la Liberté

眼尖的格友，應該已經發現懶骨頭家Banner圖片每次點選都不一樣囉！

是的，我把我家的Banner圖片變的更彈性了，這樣我自己看了也很開心，就算偷懶沒發文，也可以讓自己家常常有變化（這算是藉口嗎？）

今天就來跟大家說一下這是怎麼辦到的！相信一個星期後，常來格友們的網誌都有新氣象囉！ 

步驟一：

首先要搞清楚，你的所使用的模板預設的圖片有多大，再依照這個大小挑選照片，把照片切割到一樣的大小，當然你也可以增加設計，比方說地圖、旗幟等等（可參考另一篇文章 圖片簽名章）

步驟二：

找到你網誌的 CSS 原始碼，簡單的訣竅是程式碼中有圖片網址的那一段就是了，圖片是以痞客幫的管理後台為例，通常都有註記，所以很好找喔！找到的程式碼如下圖：黃色背景的部分就是預設的Banner圖網址，可直接複製到IE的address按enter，看一下是不是就是你現在的Banner圖片，確定之後，把標題（本例子為header，也有可能是Banner等其他標題）抄下來，然後就不要管他了！

步驟三：

接下來，依照圖示到你的側邊欄位選單中，任選一個自訂的欄位標題按"設定"

4/29 更新....
多虧馬桶碰到問題，我才發現我打錯了，底下有一段語法

var randompic = Math.floor(7*Math.randompic());

應該是

var randompic = Math.floor(7*Math.random());

才對，不好意思，我一時手快多打了，有問題的再跟我說喔！

要注意程式碼中紅色標記的部分，header一定要與模板預設的標題欄位相同才有效喔！另外，由於程式是隨機抓圖片，大家都知道所謂隨機並不會很平均的抓圖，如果張數較多，通常第一張及最後一張出現的機率會小一點喔！

另外，也請注意一下紅色部分的不同：document.write(' background-image:url(" ' + banner[random] + ' ") ;');

點 這裡 下載語法　<<靠！無名把文章中的 Javascript 語法強制刪除，真機車！請大家打打字吧！>>

把上面程式碼加在自訂區塊內容的最後面，再按"送出"
 

最後記得儲存版面，這樣就大功告成，你的網誌從今天起就不一樣啦！
其實這個原理是用 javascript 改寫一段新的 Banner 程式碼，所以各位不用動到原本的設定，新增一段語法就可以囉！

以下就是各位可能在懶骨頭家看到的Banner圖，你看過幾張了呢？