Arthur叔叔

近來裝修 Blog，增加 Banner 自動更換的功能。找了一堆網友的分享，仍然無法意會該如何新增。
多方嘗試後，總算完成了；因此，將此次的經驗留下記錄。
這個方法適用於 PIXNEX，是否支援其他部落格平台就不得而知了。

整體而言，這個方法的主要目的就是透過 java script 產生新的 banner 或 header 的描述。
透過這些描述將取代原本的設定。

Step1. 進入部落格管理後台，選取你想要使用的樣式。
Step2. 進入樣式設計精靈裡面的 CSS 原始碼編輯。

    以我的部落格為例，我的圖片修改是在 banner 裡面。
    修改前：
    #banner {
        height: 109px;
        background: #fff url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49c03d2694c36.jpg) no-repeat left bottom;
        padding: 0px;
    }
    修改後：將 background 的描述全部刪除，並調整我預計 banner 的高度。
    #banner {
        height: 480px;
        padding: 0px;
    }

Step3. 進入部落格管理的側邊欄位設定，新增欄位。標題隨意，標題內容如下

    <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>

需注意 5 的地方，此設定為圖片數 - 1。
以我的設定而言，我總更設定了六張圖，所以我使用 5。

Step4. 將新增完成後的欄位拖放置側欄位置即可。
Step5. 大功告成。

圖片的部分，需自己找出適合的調整大小；如此，部落格看起來會更好看。

這點我也還在摸索。

參考網友連結：

http://hare48.pixnet.net/blog/post/25350889