近來裝修 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


ccchiu 發表在 痞客邦 PIXNET 留言(0) 人氣()