[Blogger] 隨機更換Blog Banner

眼尖的人可以發現，每次進來看到的圖片都是不一樣的。這次改版很重要的，就是要把這個功能充分實現和發揮功效。

這個隨機圖片的功能不是只能運用在此，其實透過這個javascript，不只可以應用在「隨機Banner」，還可以產生「隨機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;
}
基本上，就是利用這個javascript，讓每次都產生一個同樣的background定義，用以覆寫裡頭的wrapper-header的background定義，所以記得要把底下這段code放置在之後」，就行了。主要是參考Kaie的code，再把sandor修改的地方合併成下面這個code：

<script type="text/javascript">

var banner= new Array()

banner[0]="http://lh6.ggpht.com/_4e1q5BWC6EE/SUUq77nBbhI/AAAAAAAACQw/LtkeHa2mp6g/Header%20Background-1.jpg"
banner[1]="http://lh4.ggpht.com/_4e1q5BWC6EE/SUUq89FTS3I/AAAAAAAACQ4/k4yoThmMih0/Header%20Background-2.jpg"
banner[2]="http://lh3.ggpht.com/_4e1q5BWC6EE/SUUq-DTtT_I/AAAAAAAACRA/XP9D2CzBGe0/Header%20Background-3.jpg"
var random=Math.floor(banner.length*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><style>

原本是這樣：
var random=Math.round(4*Math.random());
而藍字就是修改的部分，這樣未來就可以直接增加圖片而不用一直更動數字了。

至於標題的圖片，主要是從我出國遊玩的照片中挑選出來的，執相機的攝影師有兩位，不過國家和地點就留點謎題，給大家猜猜囉。

延伸閱讀：
freeyasoul adventure: random rotating banner hack
Kaie's Blog: [Blog] Random Rotating Banner Hack
sandor的攝影生活: [站務] blog banner 隨機更新功能!!