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:
基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：
※記得上頭的"4"要一致，因為他的random產生器，填4的話，就是產生0~4這5種值!假設你只有0,1,2三張圖的話，那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!
此功能在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
34 Comments:
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..
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..^^
When: February 09, 2007 7:44 PM
你好，文章開頭所提的Hack是什麼呢 @@?
我WP裡好像沒有這個預設的plugin
還有一個問題，第二個原始碼是貼在style.css裡嗎?
貼上去之後沒有反應內XD
可能是因為沒有此Hack?
When: February 10, 2007 1:21 PM
To hweiwen:
hack沒什麼特別意思啦，其實就是指這個「技術、技巧、功能」之類的..意思而已。至於WP沒有這個預設的plugin唷，我沒用也不太清楚說，或許是版本不同的關系吧。第二個碼始碼應該不會是貼在那個檔裡，而且由於我沒玩過WP所以我也無法確切告知你該如何修改成WP適用的語法…真是不好意思...XD，你只要去找WP的此外掛即可，並不需自行修改唷..^^
When: February 23, 2007 10:49 PM
似乎只能顯示十張圖，第十一章圖(banner[10])開始就會顯示不出來...有解決之道嗎？ 謝謝。
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;
}
是不動？還是刪除掉？
When: March 28, 2007 7:53 AM
To James:
保持不動即可 :D
When: June 18, 2007 1:54 AM
這個HACK真好用,謝謝你..
我裝在我的BLOG中了..^^
When: June 18, 2007 11:33 AM
To chitekim:
免客氣 ^_^ 拿去服用...
When: September 17, 2007 8:16 PM
關於隨機亂數部分的語法，我有點小小的意見，我已經寫在我的blog中了，歡迎來討論一下 :)
http://blog.pixnet.net/sandor/post/8897346
When: October 12, 2007 2:13 PM
To 【Mike™ a.k.a 米高沈天母混台北】:
咦，關於修改的方式，我想位仁兄的文章可以幫上忙
http://synnwang.blogspot.com/2006/11/blog_17.html
呵恰巧記得有人post過，我就懶得自己打了..
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..
When: November 02, 2007 3:52 PM
hi, Kaie.
我依照你和 sandor 的方式把 javascript 加入以後，出現問題，當網頁還在 loading 時，banner 圖片是隨機出現的沒錯，但是當網頁 loading 完成後，banner 圖片就跳回原本 CSS 寫好的那一張，不曉得這樣說你能瞭解嗎？請問這該怎麼調整，謝謝！
When: November 03, 2007 12:20 AM
To thinkerCKD:
我懂你的問題，我有去看了一下，還真搞不太清楚到底是哪邊出了問題耶...不然你將那段script整個移到</body>這行之前試試看...因為我找不出你body中間是否又作了些什麼和banner圖有關的動作..
When: November 04, 2007 12:00 AM
hi, Kaie.
謝謝你，我把 script 移到你說的位子就解決了問題，只是，為什麼會這樣呢？
When: November 04, 2007 12:47 AM
To thinkerCKD:
原因就是出在於原先script所放置的位置，一直到/body這行之前，有對banner作了些動作(應該是這樣的沒錯，只是我懶得去trace出來在哪，沒有原始的template code實在有點難trace)，導致用這個script改完banner之後，又被蓋掉(overwrite)了，於是乎我請你移到後面一點，就不會產生此一情形了。至於要找到真正原因的話，你得好好瞧瞧body tag間，實際上又動了些什麼手腳。
When: November 05, 2007 1:41 AM
hi, Kaie.
我懂你的意思，或許是原先template的body區段裡就有寫了一些有關banner的code，因為我自己並沒有改過body區段的內容。謝謝你的幫忙！ ：）
When: November 05, 2007 2:03 AM
To thinkerCKD:
Ya...我猜可能是這樣子!! 不客氣有空常來..
When: April 13, 2008 2:53 AM
Minima Black 不能使用這個hack。。。="=
When: April 13, 2008 3:02 AM
To f.l.:
應該不會這樣子才對 =.= 或許要作些小修改就ok了，應該這個hack並不僅適用於blogger，只要有支援javascript的BSP都ok的!!
When: May 02, 2008 7:06 PM
我用的也是blogger,可是爲什麽我把代碼粘貼到back后還是沒變化呢
而且好像其中的"符號都認不出來
難道是blogger改版導致這段代碼無效了
When: May 04, 2008 2:39 PM
To オレンジ :
這段code可能還得再修改一下了，其中某些link好像已經失效了..但小小修改一下，改到可以正常run完，應該就可以用了..^^
When: August 29, 2008 7:44 PM
hi, 你好!
我剛留言好像不見了, 所以再來寫一下!
如有重複, 請原諒!
我用你以上教的, 已成功了! 非常感謝!
另有一問題請教:
U are here : > home > blog > live
以上這種的 directory, 你知道要什麼寫碼嗎??
謝謝!
When: August 30, 2008 1:00 AM
To Wechner:
咦...記記得有看過tutorial但忘了在哪了，google找看看吧..
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
回來向你報告（我比較８，喜歡大家告知大家 ：ｐ）！
When: September 27, 2008 9:35 PM
喔喔喔~ 看到這馬上就飆去我的小部落格改一下。沒想到剛好碰到GC沒辦法在網頁找到關鍵字的大~~~~BUG~~~~~(只好認命的換回FF繼續打拼)
Anyway~ thanks Kaie!
When: September 27, 2008 11:52 PM
To Powerxgua:
是喔..Google Crhome...sucks..給他一點時間，第第二次大改版肯定就會有不錯的表現的..
When: December 10, 2008 3:02 AM
想問一下..如果只是單純要用隨機圖片以及連結
要怎樣改比較好呢?
感謝
我自己試寫了好幾種都失敗...
When: December 11, 2008 1:13 AM
To Denish:
這個Hack也就是只有單純的隨機圖片及連結，不過他的隨機決定於每次按F5重新整理時，才會更新，若你指的隨機圖片是指會不斷更新(不用重新整理)，那這個就辦不到了，必須加上timeout的機制才行!
When: December 16, 2008 11:27 AM
沒有一定要加上時間啦 我也只是想要每次F5不同而已
但不一定是背景換 而是其中內嵌的一張圖換
不知道這樣子做得到嗎 冏"
感謝
When: December 17, 2008 1:13 AM
To Denish:
其中嵌入的一張圖換唷，那可能你就要自己切成許多個Block，才然達到你的需求!! 硬要作的話，花點時間，我想是OK的!!
When: September 09, 2013 12:47 AM
請問能對應於新的 Blogspot 嗎? thx in advance
When: September 09, 2013 12:49 AM
請問能對應新的 blogspot 嗎? thx
新的都沒有 head-wapper 了
When: September 09, 2013 1:11 AM
@森里
其實這只是個概念與作法，假使在新的blogspot沒有的話，找到相對應的header區塊，這段JavaScript語法同樣會有作用的 :)
Try it!
Plz Post a Comment / 拜託你留個言啦...^^"