　jijiong's life-note: Blogger 內隨機輪播 banner

2010年3月5日星期五

Blogger 內隨機輪播 banner

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

作法如下：

一、準備幾個橫幅 banner 的圖片，像素大小可依據自己 header wrapper 值。
二、上傳圖片至相簿空間，並記下圖片外連的位址。
三、在程式原始碼內 <body> 後放入下面的 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("<style>");

document.write("#header-wrapper {");

document.write(' background:url("' + banner[random] + '") no-repeat center;');

document.write(" }");

document.write("</style>");

</script>

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

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

width: 938px;

height: 280px;

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

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

參考資料：南風部落

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

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

**補充：Picasa Web 網路相簿中，每本相本都可設定顯示權限，若有重設定，外連網址也會跟著不同，這一點真的要很注意，若你的相片有使用外連，所以最好不要隨便調整顯示權限，有分為公開、知道連結的半公開、僅限本人三種權限，若有重新設定，它的外連網址會跟著不同，分享一下，以免有些人會覺得莫名其妙，相片怎麼都變叉燒包了~~~

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

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