話說架空馬戲團過去似乎常常以圖不驚死人不休(?)的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[順序數字]="此處改為您的第N張圖片網址"」字串。


5. 如果設定好上述script但是效果卻沒顯示出來,或是只有部分顯示、位置跑掉等等狀況,請自行檢視您的CSS原始碼,看看版型相關數值是否需要微調。會影響橫幅位置的部分通常如下:


橫幅全區區塊:#header

橫幅主要內容:#banner

所有內容區塊:#container

文章內容區塊:#content

公告欄位區塊:#spotlight

其他服務導覽:#navigation (切換部落格/相簿/名片/留言板)


6. 打完存檔收工!



P.S. 我不管我不管!平常時候就算了,未來每當Halloween週或農曆鬼月來臨,我無論如何也要直接掛上我心愛的詭異banner自HIGH一番!不,乾脆現在就來準備即將到來的Halloween週的恐怖banner吧!到了Halloween週,我就要來個恐怖banner強迫中獎兼連環轟炸娃哈哈哈哈哈哈!(我到底是在任性個什麼勁兒?XD)




arrow
arrow
    全站熱搜

    demona 發表在 痞客邦 留言(3) 人氣()