在這個「Blogger社群討論串」有成員詢問 "如何令 blogger 標題圖片隨機出現 ?",除了當時沒有閒暇研究 js 如何寫,另外就是直覺認為此功能或許使用率不高。
後來想想某些性質的網站,例如攝影、美食、旅遊、遊戲(模擬市民 ths sims),也許站長會想把作品製作成橫幅圖片,能隨機出現在標頭的位置,讓常客每次來逛的時候都有新鮮感。
如此看來這個功能還是有一定的實用性,而且這個程式算是最簡單的等級,因此就稍微研究一下怎麼實現。想先看效果,可先參考這個 DEMO 網頁:
稍微 google 一下網路上的程式,大多已經失效,或許是 Blogger 改成新範本的緣故,無論如何沒有看到通用所有狀況的解決方案。
要在 Blogger 的標頭加入背景圖片,最簡單的方法為以下步驟:
Blogger 後台 → 版面配置 → 標頭 → 編輯
出現以上畫面──
圖片:可選擇「從電腦上傳」或「來自網路」。不過不建議選擇「來自網路」,因為這張圖片的網址將不會出現在網頁原始碼,本文的程式也將找不到這張圖片。
位置:不同的選項會導致 js 處理的方法不同──
1. 輸入標題和說明之後:此時圖片會以背景的方式呈現,滑鼠經過不能點擊。
網頁原始碼中圖片的位置在 <div id="header-inner" style="background-image: url(圖片網址);...>
2. 不需要使用標題和說明、於圖片下方附上說明:選擇這兩種狀況時,圖片會以物件的方式呈現,滑鼠經過可以點擊。
網頁原始碼中圖片的位置在 <div id="header-inner"><a href=...><img src="圖片網址"...>
瞭解以上原理及圖片位置後,就能利用簡單的 js 來置換為隨機圖片。
1. 後台「範本」→「編輯 HTML」,如果範本裡已經安裝過 jqeury 的話,就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串);如果沒安裝過 jquery,請搜尋</head> 這個字串,找到後在此字串的前一行,插入以下程式碼:
2. 繼續搜尋以下字串:
找到後,在其下一行,插入以下程式碼:
3. 請參照以上程式碼行號,以下為注意事項:
在程式碼中的四個圖片網址(藍色字串),可在這個測試網頁看到隨機輪播效果:
只要重新整理,就可看到不同的頁首橫幅圖片。
瞭解隨機圖片的 js 寫法後,在 Blogger 有很多的應用方式,例如側邊欄的照片輪播,或是配合「Blogger 最新文章+任意尺寸縮圖」,就能做出首頁的隨機文章(附上大圖片)輪播了。
後來想想某些性質的網站,例如攝影、美食、旅遊、遊戲(模擬市民 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 src="圖片網址"...>
瞭解以上原理及圖片位置後,就能利用簡單的 js 來置換為隨機圖片。
二、安裝程式碼
1. 後台「範本」→「編輯 HTML」,如果範本裡已經安裝過 jqeury 的話,就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串);如果沒安裝過 jquery,請搜尋
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
2. 繼續搜尋以下字串:
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
找到後,在其下一行,插入以下程式碼:
3. 請參照以上程式碼行號,以下為注意事項:
- F~I行藍色字串為圖片網址,請置換為自己的圖片網址。
- 若只想輪播三張圖片,請刪除 I 行程式碼;其餘圖片數量請類推。
- 若想增加輪播的圖片,請隨意複製 F~I其中一行的程式碼,插入 I行後面,並置換藍字圖片網址即可。
- 輪播的圖片網址,請包含最早上傳的那張圖片網址。
- 建議每張圖片的尺寸相同,版面效果比較統一。
三、效果展示
在程式碼中的四個圖片網址(藍色字串),可在這個測試網頁看到隨機輪播效果:
只要重新整理,就可看到不同的頁首橫幅圖片。
四、小結
瞭解隨機圖片的 js 寫法後,在 Blogger 有很多的應用方式,例如側邊欄的照片輪播,或是配合「Blogger 最新文章+任意尺寸縮圖」,就能做出首頁的隨機文章(附上大圖片)輪播了。