Menambahkan Banner Melayang Mengikuti Scroll

Jika sobat sekalian memperhatikan blog ini nampak pada bagian kiri atas ini ada banner yang melayang atau bergerak mengikuti scroll vertikal.

Kali ini akan membahas tips simple menambahkan Banner melayang mengikuti scroll arah vertikal.

Berikut caranya :

• Login akun blogger
• Pilih Lay Out/Tata Letak
  
• Add html script
• Masukkan syntax script  berikut :

<style type="text/css">

    #gb{

    position:fixed;

    top:10px;

    z-index:+1000;

    }

    * html #gb{position:relative;}


    .gbcontent{

    float:right;

    border:0px solid #A5BD51;

    background:#ffffff;

    padding:10px;

    }

    </style>


    <script type="text/javascript">

    function showHideGB(){

    var gb = document.getElementById("gb");

    var w = gb.offsetWidth;

    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

    gb.opened = !gb.opened;

    }

    function moveGB(x0, xf){

    var gb = document.getElementById("gb");

    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

    var dir = xf>x0 ? 1 : -1;

    var x = x0 + dx * dir;

    gb.style.top = x.toString() + "px";

    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

    }

    </script>


    <div id="gb">


    <div class="gbtab" onclick="showHideGB()"> </div>


    <div class="gbcontent">


    <div style="text-align:right">

    <a href="javascript:showHideGB()">

    .:[Close]2x:.

    </a>

    </div>

    <center>

(html Script yang akan dimunculkan )

     </center>


    <script type="text/javascript">

    var gb = document.getElementById("gb");

    gb.style.center = (30-gb.offsetWidth).toString() + "px";

    </script></div></div>

Silahkan dicoba, simple dan yang penting loading blog sobat tidak berat.
Jika kurang puas atau tidak berhasil silahkan berkomentar.
Thanks