〔教學〕部落格的隨機banner語法＠pixnet

最近發現了有趣的語法,可以讓BLOG上方的banner隨機出現不同的圖片.

語法其實很容易,但是kiki試了兩天才成功.也不知是哪邊有問題?? 

 

一開始,測試多次,banner都被切成一小塊,只顯示最上方的一小塊橫條.

明明後台css語法已經設定了height,但就是無法順利執行.

隔天,再次測試.竟然莫名其妙的成功了,怪哉.

 

kiki是參考http://yanting.pixnet.net/blog/post/11446980的教學,自己亂改的xyz軟體補給站.

以下步驟適用pixnet,僅供參考.

 ------------------------------------------------------------------

 

1.原版::把你的CSS表中#banner { background: url('http://．．．．.jpg')} 這個東西改成 { background:  #none;}

 

 我的聲音相關及音樂轉檔工具改法是直接將background: url('http://．．．．.jpg")整個拿掉,

   直接設定banner高度(height).加上實線邊框(border).

   原版是更改banner內的語法，但是kiki的部落格語法，放在header也沒問題。

   為了配合自己設定的height，上傳的幼教DVD圖片也要特別注意大小喔!!

  

   #banner {height:380px;border:1px  solid  #A2B5CD;}

   #header {height:380px;border:1px  solid  #A2B5CD;}

   (如果不要圖片有框線，將border那一串整個拿掉就可以了)

 

 

 

2.原版::複製這個語法到"自訂欄位"中.

 

 我則是把語法放在"部落格描述"中.(放在"公佈欄位"應該也是可以)

 

<script type="text/javascript">
var banner= new Array()
banner[0]="圖片網址"
banner[1]="圖片網址"
banner[2]="圖片網址"
banner[3]="圖片網址"
banner[4]="圖片網址"
banner[5]="圖片網址"
var random=Math.round(5*Math.random());
document.write("<style>");
document.write("#banner  {");
document.write(' background:url("' + banner[random] + '") no-repeat center;');
document.write(" }");
document.write("</style>");
</script>

 

ps::圖片張數可以增加,依張數多寡,記得更改紅色數字部分,(5*Math.random())

-------------------------------------------------

 

以上，歡迎發問，但是不確定能幫忙解答，只能盡力幫忙。

kiki也只是自己研究，算是css菜鳥，太深的問題，可能幫不上忙囉!!