[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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia19yZ70eMlGgAhGBcESmdDEjJJBbNmNwMJWEHgvB1nlFeH5Io-QYJyFhLjEf31EQtHeCnnNQYvG8USjlJB-76_1IMEcl9qGkwR8HYHMQ3Y0wkWMUHQFYcDyQapb7qCs-TFgFPsN28uEQ/"
banner[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3bF7Ok7P7I_hBdoryCkd66WTKkKJBb_FskMVDdQIN86KsWSq910jOn2pKeWpEfzX-Bbz3AcKrLYJG6ILEsGsXozZuBLRGizzcqqJbP2cQVu4qZuwuAr3MWhDEhIxwJ-FQaKQTcPObu8/"
banner[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXZfh68wt7xE2Ysr6GlhiBgOFJB4reh6EMWq_sVJ2vy4-AdzO12A3RYx_qgSt6sv_OvYV3axaGCulCmxOZz22mv6bLcubar_G4ZGI22Zq3BNW1LtihIAXHA990OtxwVuZRb-gjp0xCpY/"
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 隨機更新功能!!