Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Monday, November 13, 2006

[Blog] Random Rotating Banner Hack

這個Hack相當的棒,可以隨機在你所指定的「圖片集」中,隨機Show一張圖,用在Blog的Banner上..那就更Cool啦 ^_^,所展現的效果就在我的Blog,直接多試幾次「重新整理 F5」,就清楚了!

此功能在WordPress中已經是預設的plug-in了,藉由這個簡易的javascript,可以達成很多其它功能,像是:產生「隨機Discription」、「隨機 Background」....等等...想到什麼,就自己加吧!
以隨機Banner來說明的話,主要的作法就是利用javascript修改css style,例如原來template裡面的#header-wrapper的style:
#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}

基本上,我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時,先利用一段javascript code,產生一個同樣的background定義,用以覆寫<body>裡頭的wrapper-header的background定義,所以記得要把底下這段code「放置在<body>之後」,就行了:
<script type="text/javascript">
var banner= new Array()

banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

※記得上頭的"4"要一致,因為他的random產生器,填4的話,就是產生0~4這5種值!假設你只有0,1,2三張圖的話,那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作,就再加新的document.write(...)的語法進去就ok囉!!

重要參考文獻: Freeyasoul Adventure -> Random Rotating Banner Hack

37 Comments:

Who: arephyz Class:
When: February 04, 2007 5:35 PM  

this is such a nice hack Kaie..
I can't understand Taiwan's language,
i just copy and paste the code..

If you have a time can you make a template base on google ajax..

Who: Tsung-Kai Chen Class:
When: February 09, 2007 5:47 PM  

To arephyz:
:) this is " Freeyasoul Adventure" 's hack, thx him..^^ I stole this hack from him..ccc, if u have time try to learn Chinese, that's interesting..^^
Of cause, if I have time I would love to make one..^^

Who: hweiwen Class:
When: February 09, 2007 7:44 PM  

你好,文章開頭所提的Hack是什麼呢 @@?
我WP裡好像沒有這個預設的plugin
還有一個問題,第二個原始碼是貼在style.css裡嗎?
貼上去之後沒有反應內XD
可能是因為沒有此Hack?

Who: Tsung-Kai Chen Class:
When: February 10, 2007 1:21 PM  

To hweiwen:
hack沒什麼特別意思啦,其實就是指這個「技術、技巧、功能」之類的..意思而已。至於WP沒有這個預設的plugin唷,我沒用也不太清楚說,或許是版本不同的關系吧。第二個碼始碼應該不會是貼在那個檔裡,而且由於我沒玩過WP所以我也無法確切告知你該如何修改成WP適用的語法…真是不好意思...XD,你只要去找WP的此外掛即可,並不需自行修改唷..^^

Who: 維克 Class:
When: February 23, 2007 10:49 PM  

似乎只能顯示十張圖,第十一章圖(banner[10])開始就會顯示不出來...有解決之道嗎? 謝謝。

Who: James Class:
When: March 28, 2007 12:15 AM  

請問原來的#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}
是不動?還是刪除掉?

Who: Tsung-Kai Chen Class:
When: March 28, 2007 7:53 AM  

To James:
保持不動即可 :D

Who: chitekim Class:
When: June 18, 2007 1:54 AM  

這個HACK真好用,謝謝你..
我裝在我的BLOG中了..^^

Who: Tsung-Kai Chen Class:
When: June 18, 2007 11:33 AM  

To chitekim:
免客氣 ^_^ 拿去服用...

Who: sandor Class:
When: September 17, 2007 8:16 PM  

關於隨機亂數部分的語法,我有點小小的意見,我已經寫在我的blog中了,歡迎來討論一下 :)

http://blog.pixnet.net/sandor/post/8897346

Who: 【Mike™ a.k.a 米高沈天母混台北】 Class:
When: October 12, 2007 12:30 PM  

請問一下,我的標題圖片無法連回我的首頁,請問我要在哪裡修改。

http://mykalshen.blogspot.com

Who: Tsung-Kai Chen Class:
When: October 12, 2007 2:13 PM  

To 【Mike™ a.k.a 米高沈天母混台北】:
咦,關於修改的方式,我想位仁兄的文章可以幫上忙
http://synnwang.blogspot.com/2006/11/blog_17.html
呵恰巧記得有人post過,我就懶得自己打了..

Who: 【Mike™ a.k.a 米高沈天母混台北】 Class:
When: October 12, 2007 3:42 PM  

謝謝你提供他的方法,但是我不需要隨機更換照片,我有研究了一下用他的方式,只讓他隨機跑一張照片,但沒有成功。請問一下如果只是要單純讓圖片可以變連結回去,有沒有簡單一點的方式。

Who: Tsung-Kai Chen Class:
When: October 12, 2007 4:32 PM  

To 【Mike™ a.k.a 米高沈天母混台北】:
嗯,的確如此,我沒注意到..sorry bro
我的方法如下:
Step1. 在你的template中找到 <div id='header-wrapper'>
Step2. 取代為底下這段即可
<div id='header-wrapper' onclick='window.location.href="http://mykalshen.blogspot.com/"' onmouseover='this.style.cursor="pointer"'>

希望有解決你的問題,btw I like ur dog rather than ur blog...lol. he is so cute..

Who: 【Mike™ a.k.a 米高沈天母混台北】 Class:
When: October 12, 2007 5:13 PM  

感謝你的教學,簡單又明瞭,已經解於我的問題了。也謝謝你參觀我的blog

Who: thinkerCKD Class:
When: November 02, 2007 3:52 PM  

hi, Kaie.
我依照你和 sandor 的方式把 javascript 加入以後,出現問題,當網頁還在 loading 時,banner 圖片是隨機出現的沒錯,但是當網頁 loading 完成後,banner 圖片就跳回原本 CSS 寫好的那一張,不曉得這樣說你能瞭解嗎?請問這該怎麼調整,謝謝!

Who: Tsung-Kai Chen Class:
When: November 03, 2007 12:20 AM  

To thinkerCKD:
我懂你的問題,我有去看了一下,還真搞不太清楚到底是哪邊出了問題耶...不然你將那段script整個移到</body>這行之前試試看...因為我找不出你body中間是否又作了些什麼和banner圖有關的動作..

Who: thinkerCKD Class:
When: November 04, 2007 12:00 AM  

hi, Kaie.
謝謝你,我把 script 移到你說的位子就解決了問題,只是,為什麼會這樣呢?

Who: Tsung-Kai Chen Class:
When: November 04, 2007 12:47 AM  

To thinkerCKD:
原因就是出在於原先script所放置的位置,一直到/body這行之前,有對banner作了些動作(應該是這樣的沒錯,只是我懶得去trace出來在哪,沒有原始的template code實在有點難trace),導致用這個script改完banner之後,又被蓋掉(overwrite)了,於是乎我請你移到後面一點,就不會產生此一情形了。至於要找到真正原因的話,你得好好瞧瞧body tag間,實際上又動了些什麼手腳。

Who: thinkerCKD Class:
When: November 05, 2007 1:41 AM  

hi, Kaie.
我懂你的意思,或許是原先template的body區段裡就有寫了一些有關banner的code,因為我自己並沒有改過body區段的內容。謝謝你的幫忙! :)

Who: Tsung-Kai Chen Class:
When: November 05, 2007 2:03 AM  

To thinkerCKD:
Ya...我猜可能是這樣子!! 不客氣有空常來..

Who: F.L. Class:
When: April 13, 2008 2:53 AM  

Minima Black 不能使用這個hack。。。="=

Who: Tsung-Kai Chen Class:
When: April 13, 2008 3:02 AM  

To f.l.:
應該不會這樣子才對 =.= 或許要作些小修改就ok了,應該這個hack並不僅適用於blogger,只要有支援javascript的BSP都ok的!!

Who: オレンジ Class:
When: May 02, 2008 7:06 PM  

我用的也是blogger,可是爲什麽我把代碼粘貼到back后還是沒變化呢
而且好像其中的"符號都認不出來
難道是blogger改版導致這段代碼無效了

Who: Tsung-Kai Chen Class:
When: May 04, 2008 2:39 PM  

To オレンジ :
這段code可能還得再修改一下了,其中某些link好像已經失效了..但小小修改一下,改到可以正常run完,應該就可以用了..^^

Who: Wechner Class:
When: August 29, 2008 7:44 PM  

hi, 你好!
我剛留言好像不見了, 所以再來寫一下!
如有重複, 請原諒!

我用你以上教的, 已成功了! 非常感謝!

另有一問題請教:

U are here : > home > blog > live

以上這種的 directory, 你知道要什麼寫碼嗎??

謝謝!

Who: Tsung-Kai Chen Class:
When: August 30, 2008 1:00 AM  

To Wechner:
咦...記記得有看過tutorial但忘了在哪了,google找看看吧..

Who: Wechner Class:
When: August 30, 2008 10:33 AM  

原來不叫"directory"所以我一直沒在google找到!
我剛到處撞, 發現了這位朋友:Abin's teach http://abintech.azhai.org/2007/07/year-month-breadcrumbs.html

事實, 我是那種copy & paste不愛動腦那種,最先看到他標題是與我找無關的, 我差點就跳走了,就是看多一眼,就找到了! 原來是叫:Breadcrumbs 作者:Hoctro's place / Hack

回來向你報告(我比較8,喜歡大家告知大家 :p)! 

Who: powerxgua Class:
When: September 27, 2008 9:35 PM  

喔喔喔~ 看到這馬上就飆去我的小部落格改一下。沒想到剛好碰到GC沒辦法在網頁找到關鍵字的大~~~~BUG~~~~~(只好認命的換回FF繼續打拼)

Anyway~ thanks Kaie!

Who: Tsung-Kai Chen Class:
When: September 27, 2008 11:52 PM  

To Powerxgua:
是喔..Google Crhome...sucks..給他一點時間,第第二次大改版肯定就會有不錯的表現的..

Who: Denish Class:
When: December 10, 2008 3:02 AM  

想問一下..如果只是單純要用隨機圖片以及連結
要怎樣改比較好呢?
感謝

我自己試寫了好幾種都失敗...

Who: Tsung-Kai Chen Class:
When: December 11, 2008 1:13 AM  

To Denish:
這個Hack也就是只有單純的隨機圖片及連結,不過他的隨機決定於每次按F5重新整理時,才會更新,若你指的隨機圖片是指會不斷更新(不用重新整理),那這個就辦不到了,必須加上timeout的機制才行!

Who: Denish Class:
When: December 16, 2008 11:27 AM  

沒有一定要加上時間啦 我也只是想要每次F5不同而已
但不一定是背景換 而是其中內嵌的一張圖換
不知道這樣子做得到嗎 冏"

感謝

Who: Tsung-Kai Chen Class:
When: December 17, 2008 1:13 AM  

To Denish:
其中嵌入的一張圖換唷,那可能你就要自己切成許多個Block,才然達到你的需求!! 硬要作的話,花點時間,我想是OK的!!

Who: 森里 Class:
When: September 09, 2013 12:47 AM  

請問能對應於新的 Blogspot 嗎? thx in advance

Who: 森里 Class:
When: September 09, 2013 12:49 AM  

請問能對應新的 blogspot 嗎? thx
新的都沒有 head-wapper 了

Who: Kent Chen Class:
When: September 09, 2013 1:11 AM  

@森里
其實這只是個概念與作法,假使在新的blogspot沒有的話,找到相對應的header區塊,這段JavaScript語法同樣會有作用的 :)
Try it!