2013年10月12日

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

A+
在這個「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 最新文章+任意尺寸縮圖」,就能做出首頁的隨機文章(附上大圖片)輪播了。


更多實用工具:

18 則留言:

  1. 我改天用這方法來試試看,黑板固定,只換裡面的照片,這樣看起來應該也會像黑板裡的圖片在輪播的感覺~~~
    謝謝!

    回覆刪除
  2. <7230014498299190562>(以上內容請勿刪除,從括號之後開始留言)要黑板固定,又隨機更換裡面的照片,感覺是不小的工程~~加油!

    回覆刪除
  3. Wayne兄,你好。我借了程式改了,隨機更換相片+網誌描述。
    http://koosan.blogspot.com/

    回覆刪除
  4. <7623450339074342953>(以上內容請勿刪除,從括號之後開始留言)hi, コーさん, 效果不錯呢!不過我還以為您發了修改我程式碼的文章,原來只是單純放到你網站而言,這樣沒有通知我沒關係的。

    如果哪天有發表修改本文程式碼的文章時,記得再通知我吧,會把您的應用文章補充到本文的,讓讀者知道更多的應用方式!

    回覆刪除
  5. <2506553804240542992>(以上內容請勿刪除,從括號之後開始留言)

    好的,遲些會補發文章。

    回覆刪除
  6. 請問有辦法自動輪播嗎?! 查網路上的資料好像都沒有提到這塊 還是現在的功能無法做到呢 謝謝您

    回覆刪除
  7. <681134429999712840>(以上內容請勿刪除,從括號之後開始留言)輪播當然沒問題,很多網站都有這功能,主要看有沒有人寫,並且分享出來了~

    回覆刪除
  8. 您好 我還是不太了解該怎麼連結到自己的圖片,需要在公開網站上po出自己的圖片上傳,再用您的程式裡面的網址位址去連結到自己想要圖片嗎,我試過好多次,但都看不到我的圖片

    回覆刪除
  9. <554017411878338464>(以上內容請勿刪除,從括號之後開始留言)請提供網址連結,保留出問題的狀況,才能看是什麼情形。

    回覆刪除
  10. http://htchcyt.blogspot.tw/ 都是看不到的~~~請問版主該如何解決呢 謝謝您

    回覆刪除
  11. 版主謝謝我用出來了感恩~

    回覆刪除
  12. <4836006835575157957>(以上內容請勿刪除,從括號之後開始留言)OK,解決了就好 :)

    回覆刪除
  13. 版主你好,我發現用白底JPG圖片檔放標頭圖片,都會自動變成灰底
    搜尋了解決方法都沒有發現有人分享,請問版主知道該怎麼解決嗎?
    謝謝

    回覆刪除
  14. <4589778250854645960>(以上內容請勿刪除,從括號之後開始留言)麻煩請先閱讀「提問注意事項」,附上相關資訊,謝謝~

    回覆刪除
  15. http://jquery.malsup.com/cycle/
    這個腳本,可以自動輪播,雖然官方也給了使用說明。 但是我在和WFU這段代碼整合之時,因為功力不夠,暫時無法整合成功。 留下這個自動輪播的網誌,希望有人繼續研究了。 也順便能分享一下心得!!

    回覆刪除
  16. <2783792859769096005>(以上內容請勿刪除,從括號之後開始留言)自動輪播的外掛我前陣子有寫了喔:http://www.wfublog.com/2016/04/owl-carousel-jquery-slider-cdn.html 首頁輪播就是用這個的效果

    回覆刪除
  17. <7477008707199514931>(以上內容請勿刪除,從括號之後開始留言) 恩,明白。 但是標頭圖片,要和本文的script整合,就先必須研究清楚你上面的程式碼。F~I 行是定義圖片,R~W行是判斷式,但是K~P行,也是很重要的。 可是目前我還是不懂這幾行的意思,所以要再研究研究。 才能讓header-inner這個ID下的圖片,自動輪播。

    回覆刪除
  18. <1141094213556073236>(以上內容請勿刪除,從括號之後開始留言)這程式是用來處理背景圖片,不過把背景圖片拿來輪播,這樣的用途感覺不多呢~

    比較簡單的作法,是直接拉個「html/js」小工具到標頭的地方,然後直接套用輪播外掛,這樣就行了。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。