Blogger 內隨機輪播 banner

在 blogger 悠遊也一陣子了，也在 template 樣版上 hack 成自己想要版樣，得以舒適輕鬆剪剪貼貼照片，但有時總會再想改版 blogger 面版，而 header banner (標題橫幅背景)就是我之前一直想 hack 的選項之一，我單純地只想讓 banner 圖片能隨機輪播，參考了網路上許多 blogger 專家教學介紹文，決定採用簡單易用且不花時間的，並自己再稍作調整 header 的 css 樣式。

作法如下：

一、準備幾個橫幅 banner 的圖片，像素大小可依據自己 header wrapper 值。
二、上傳圖片至相簿空間，並記下圖片外連的位址。
三、在程式原始碼內 後放入下面的 code 。

<  script type="text/javascript">
var banner= new Array()
banner[0]="圖片網址"
banner[1]="圖片網址"
banner[2]="圖片網址"
banner[3]="圖片網址"
var random=Math.floor(banner.length*Math.random());
document.write("");


code 中圖片網址要自行填入圖片的外連位址，數量以此類推，置中、置左、置右等位置也可調整。這個作法是硬將圖片塞入 header wrapper 區塊間，當成背景圖，所以在網頁元素內，標題圖片不須再上載圖片。

四、調整 header 排列樣式，我是給它定長、寬值，例如：

width: 938px;
height: 280px;

圖片大小最好都一樣，當圖片之像素大小不同，會出現與邊框不對齊，而跑出空白邊。

五、完成。 如對此有疑問，請參考原作者作法，這裡僅是我對自己 blog 的筆記。

參考資料：南風部落

ps：
1.banner 圖片中有幾張是網路上抓的，暫時存用，待有照片時再重放入，若有侵權還請告知。

2.在「picasa」相簿中的圖片放置位址中，如：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL9y6X5R7Cu3zaHL-j2ek8VyLQ4tOUSfvDXvCDOhuof9hwSTQVn-eeUbsmTNi6ODYwm1l61jFw7hPeG4hc2o9jKAAKe_M5H3dRN1W9S8Ecgpvmn_oUwU5fEMxJst4LTs6-gVPm/s640/banner-1.jpg 其中「/s640」這個路徑名稱，可手動調整，改成像 /s144, /s288, /s400, /s800, /s1024, /s1440, /s1600 等，以決定 blogger 中圖片大小，所以它也是控制圖片排列的因素之一。

3.對 html code 我懂得不多，也不曾想過要懂得多深入，只是邊看邊學，將想要的 hack 用在自己的 blog 中而已，網路上一堆教學文都是值得學習的，可自行搜索參考!!

4.玩 blogger 越久，越覺得 blogger 真的彈性很大，自由度比其它平台更高!! 更重要的是，它無廣告，全程免費。