奇緣童話。旅行誌

［Banner］

　　最新為部落格安裝上新功能，是每按一次「重新整理（F5）」，或點入新的頁面，Blog上的Banner會隨機播放不同的影像，增添像切換電視頻道的新奇感，對我而言是不用艱難的取捨只有一張的限制。

　　在網路閒逛時見到好幾個部落格有這樣有趣的功能，進而產生來試試看的念頭，靠著網路豐富的教學文，只需向股狗大神（Google）進拜會搜尋到許多相關文章。（關鍵字可打：隨機、banner）

　　參考各家學說後，奇緣一試不成，二試差一點救不回來，不斷在pixnet後台的CSS語法中嘗試，誤打誤撞完成這一度想放棄的功能。

　　提供Banner隨機播放教學：
　　（適用於pixnet平台，或可使用JAVA的部落格）

1.部落格後台，樣式管理打開「編輯CSS原始碼」。

2.將#banner { background:url('http://…….jpg')}改為
→{ background:#none;}或直接去掉此行。

3.製作好放於Banner的照片，建議尺寸一致。

4.照片上傳至網路空間或相簿，並將圖片網址放進以下語法中。
（banner[0~5]是設定預播放的張數，例如banner[5]代表放入六張，可自行增減）

*****語法*****
<script type="text/javascript">
var banner= new Array()
banner[0]="圖片網址"
banner[1]="圖片網址"
banner[2]="圖片網址"
banner[3]="圖片網址"
banner[4]="圖片網址"
banner[5]="圖片網址"
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>
*****語法*****

5.複製語法放入後台任一個自訂欄位，或是「部落格描述」、「公佈欄」皆可，最後檢視成果。（奇緣是放在「部落格描述」中）

(ps.)通常第二步驟完成即可進入下個步驟，但奇緣測試的發現， Banner可能有移位與僅出現一小部分的現象，需在#banner與#header直接設定好符合自己banner的高度(height)與寬度(width)，並依原本樣式的CSS做微調。
例如：
#banner{height:000px; width:000px;}
#header{height:000px; width:000px;}

【系列閱讀】
2009-08-17 [Blog]Banner。旅行間的精彩

【參考文章】
讓心情跟隨夢想起飛─分享│banner隨機更新
地下電台─隨機BANNER教學
我在我家222號─［教學］部落格的隨機banner語法
Sandor的攝影生活─[站務] Blog banner 隨機更新功能!!