話說架空馬戲團過去似乎常常以圖不驚死人不休(?)的banner (橫幅/標題看板) 來恭迎，或者，嚇跑各位親愛的訪客呢......雖然每一個版本的banner都是我自己很喜歡才放上去的(廢話)，但不得不承認的是，每次聽到訪客反應她們被架空馬戲團的詭異banner嚇得心肝嗶啵跳的時候，即使任性如我，也還是會反省自己是否太縱容自己的怪口味了。或許，放些光明正面歡樂又陽光的照片，像是可愛插畫啊、海綿寶寶啊、偶像寫真啊、宗教聖像啊、展場SG啊、年輕人在晴空下騰空跳躍什麼的，會比較討喜一點 (nah...BITE ME!!!!)。不過糾結了半天，最後我還是會告訴自己：「這就是我的風格！架空馬戲團是我的部落格，我愛放什麼banner就放什麼banner！」所以，在此先向每個(曾)被我的詭異banner嚇到的無辜受害者們致歉了。
話說回來，雖然這種芝麻蒜皮的小苦惱說穿了根本不值一哂，我還是很認真的在思考是否有什麼方法可以不要抹煞自己的風格，同時不讓好心好意來捧場的捧油綿嚇得花容失色。結果，嗯，我決定了！乾脆就弄個banner隨機播放吧！
banner隨機播放這種小技巧是我許久前別人家的部落格看過的特殊效果，簡言之就是訪客每次光臨部落格、每次點進一個新頁面，或按重新整理鍵(F5)，部落格banner都會隨機更換。如何？聽起來很有趣吧！這樣一來，原本只能放一張圖片的banner就有了更多的選擇，而部落格主也就不必一邊想著換banner、一邊苦於難以取捨了。
就架空馬戲團的情況來說，放上一堆自己拍/畫的圖片去跑banner隨機播放的效果，首先就是降低了訪客們一進來就撞見詭異banner的機率，而且就算不幸撞見了討厭的banner，只要按重新整理就會變成其他(相對溫良恭儉讓)的banner了！當然，前提是他們還沒被嚇跑......不過假使真的跑了，那我也只能說我們沒有緣囉。
好了，廢話不多說，重頭戲就是設定banner隨機播放的方式 (使用前提：您的部落格必須支援javascript)。以下是我在pixnet管理後台中進行的設定步驟：
1. 首先將你想要拿來當banner的圖片或照片裁切成適當的長寬 (詳細數字端視個別CSS設定)
2. 將這些圖片們上傳至網路空間或您的個人相簿並記下圖片的網址
3. 進入「管理後台」→「基本／進階設定」→在「部落格描述」中貼上下列文字並存檔：
<script type="text/javascript">
var banner= new Array()
banner[0]="此處改為您的第一張圖片網址"
banner[1]="此處改為您的第二張圖片網址"
banner[2]="此處改為您的第三張圖片網址"
banner[3]="此處改為您的第四張圖片網址"
var random=Math.floor(banner.length*Math.random());
document.write("<style>");
document.write("#banner {");
document.write(' background:url("' + banner[random] + '") no-repeat center;');
document.write(" }");
document.write("</style>");
</script>
4. 補充說明：螢光綠色數字代表著您打算用來隨機播放的圖片張數，由零開始，如果超過上面列的四張(0-3)，請自行複製貼上更多的「banner[順序數字]="此處改為您的第Ｎ張圖片網址"」字串。
5. 如果設定好上述script但是效果卻沒顯示出來，或是只有部分顯示、位置跑掉等等狀況，請自行檢視您的CSS原始碼，看看版型相關數值是否需要微調。會影響橫幅位置的部分通常如下：
橫幅全區區塊：#header
橫幅主要內容：#banner
所有內容區塊：#container
文章內容區塊：#content
公告欄位區塊：#spotlight
其他服務導覽：#navigation (切換部落格／相簿／名片／留言板)
6. 打完存檔收工！
P.S. 我不管我不管！平常時候就算了，未來每當Halloween週或農曆鬼月來臨，我無論如何也要直接掛上我心愛的詭異banner自HIGH一番！不，乾脆現在就來準備即將到來的Halloween週的恐怖banner吧！到了Halloween週，我就要來個恐怖banner強迫中獎兼連環轟炸娃哈哈哈哈哈哈！(我到底是在任性個什麼勁兒？XD)
留言列表
