輪播部落格上方圖片（rotating banner）

自從買了D90以後，就常常想把部落格的banner換成自己的攝影作品，到現在總算功力足夠、作品也累積到一定數目，能夠給部落格版面來個小改版。

功能看起來很簡單，不過……因為每個人的template不盡相同，像我這種3rd party貢獻的template更是會冒出些奇奇怪怪的問題。

廢話不多說，直接切入正題。

step 1)
準備幾張寬度相同，高度相差不多的照片。

step 2) 
上傳至flickr，權限選「公開」，以原尺寸檢視相片，在視窗底下會有「取得相片的 URL」，把後面的連結記錄在文字檔裡面。

step 3)
編輯網頁css原始檔，點選「展開小裝置範本」選項，找到#header這個字串位置，在裡面加上height: 525px，如下面所示。

#header {
height: 525px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}


這部份是我自己try出來的，因為在別人的教學中不見這一項，卻仍然可以正常work，不同的template可能要多試試。

step 4)
找到css裡面的 ，在後面加上這一段程式碼：





「網址1」例如是
"http://farm3.static.flickr.com/2581/c9d0097e_o.jpg"
記得雙引號要加上去。在這裡把 step 2 裡面紀錄的網址一一填上去。

step 5)
一 般的網頁教學大概到 step 4 就結束，但是這樣作有個大問題，就是blogger會自動在圖片上面加上「文字格式」的部落格名稱，不過依我的習慣，會直接在圖片裡面用我喜歡的字型把部 落格名稱加上去，看起來比較有整體感，在這個情況下，就要想個辦法把blogger自動加名稱的方法消除掉。

我用的方式是比較偷吃步的，也就是上傳一張透明圖片來欺騙blogger。

必需要先準備一張gif格式的全透明圖片，可以用PhotoShop/ PhotoImpact來製作。接著到「網頁元素」裡面把這張圖上傳當作網頁上方圖片，並選擇「不要使用標題和說明」。

 

oh ya~ 這樣就大功告成了。

這看似簡單的功能我弄了一個晚上，其間試了三種不同的方法。

1) 加widget的方法：最簡單的方式，但最大缺點是圖片下方會有一段空白，至少在我的template上是這樣，如果有人要嘗試的話，建議先試這種方式（可以google 「rotating banner widget」）。

2) 外連到php script & 圖床的方式：最麻煩的方法，申請了一個免費的網頁空間，沒想到banner size超出最大檔案容許值，昏倒 XD

3) 就是本網頁講的方法，這個方法其實是一開始我就嘗試的方式，只是不成功才改try另外兩種方法，只是都不盡理想，只好再回來解決這個方式的問題（也就是step 5）。

呼，純手工精心打造的blogger template再度進化了一小步，用了自製大張banner果然有質感多了，雖然累但是很值得，看到部落格變漂亮，還是一個字爽啦。