• 為blog sidebar 建立一個漂浮的廣告框

    by  • 2013/04/30 • wordpress • 0 Comments

    近來看到很多格友都在 sidebar 建立一個會漂浮的廣告框 !! 其實很簡單喔 !!

    主要在 head , body 跟 sidebar 廣告框加入以下的程式碼就搞定了 !

    首先在 header.php 的 </head> 前導入jquery.min.js

    [php]
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>[/php]

    再來在</body>前加入以下代碼

    [php]<script type="text/javascript">// <![CDATA[
    $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) {
    if (window.XMLHttpRequest) {
    element.css({
    position: "fixed",
    top: 0
    });
    } else {
    element.css({
    top: scrolls
    });
    }
    }else {
    element.css({
    position: pos,
    top: top
    });
    }
    });
    };
    return $(this).each(function() {
    position($(this));
    });
    };

    //绑定
    $("#float").smartFloat();
    // ]]></script>
    [/php]

    在 sidebar 你要設為漂浮的廣告碼加入

    [php]
    <div class="float" id="float">…廣告碼…</div>
    [/php]