[教學]隨機顯示 Blogger 標頭(banner)圖片

在這個「Blogger社群討論串」有成員詢問 "如何令 blogger 標題圖片隨機出現 ?"，除了當時沒有閒暇研究 js 如何寫，另外就是直覺認為此功能或許使用率不高。

後來想想某些性質的網站，例如攝影、美食、旅遊、遊戲(模擬市民 ths sims)，也許站長會想把作品製作成橫幅圖片，能隨機出現在標頭的位置，讓常客每次來逛的時候都有新鮮感。

如此看來這個功能還是有一定的實用性，而且這個程式算是最簡單的等級，因此就稍微研究一下怎麼實現。想先看效果，可先參考這個 DEMO 網頁：

點此看範例網頁

一、Blogger 如何處理標頭圖片

稍微 google 一下網路上的程式，大多已經失效，或許是 Blogger 改成新範本的緣故，無論如何沒有看到通用所有狀況的解決方案。

要在 Blogger 的標頭加入背景圖片，最簡單的方法為以下步驟：

Blogger 後台 → 版面配置 → 標頭 → 編輯




出現以上畫面──

圖片：可選擇「從電腦上傳」或「來自網路」。不過不建議選擇「來自網路」，因為這張圖片的網址將不會出現在網頁原始碼，本文的程式也將找不到這張圖片。


位置：不同的選項會導致 js 處理的方法不同──

1. 輸入標題和說明之後：此時圖片會以背景的方式呈現，滑鼠經過不能點擊。

網頁原始碼中圖片的位置在 <div id="header-inner" style="background-image: url(圖片網址);...>


2. 不需要使用標題和說明、於圖片下方附上說明：選擇這兩種狀況時，圖片會以物件的方式呈現，滑鼠經過可以點擊。

網頁原始碼中圖片的位置在 <div id="header-inner"><a href=...><img class="post-img" src="圖片網址"...>

瞭解以上原理及圖片位置後，就能利用簡單的 js 來置換為隨機圖片。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 後台「範本」→「編輯 HTML」，搜尋以下字串：

<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

2. 找到後，在其下一行，插入以下程式碼：



3. 請參照以上程式碼行號，以下為注意事項：

• F～I 行藍色字串為圖片網址，請置換為自己的圖片網址。
• 若只想輪播三張圖片，請刪除 I 行程式碼；其餘圖片數量請類推。
• 若想增加輪播的圖片，請隨意複製 F～I 其中一行的程式碼，插入 I 行後面，並置換藍字圖片網址即可。
• 輪播的圖片網址，請包含最早上傳的那張圖片網址。
• 建議每張圖片的尺寸相同，版面效果比較統一。

三、效果展示

在程式碼中的四個圖片網址(藍色字串)，可在這個測試網頁看到隨機輪播效果：

點此看範例網頁

只要重新整理，就可看到不同的頁首橫幅圖片。

四、小結

瞭解隨機圖片的 js 寫法後，在 Blogger 有很多的應用方式，例如側邊欄的照片輪播，或是配合「Blogger 最新文章＋任意尺寸縮圖」，就能做出首頁的隨機文章(附上大圖片)輪播了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理