Cara Membuat Shout Box Tersembunyi

Posted on
  • Friday, June 10, 2011
  • by
  • Borong Shop
  • in
  • Labels:


  • Membuat Shoutbox tersembunyi bukan sahaja dapat menjimatkan ruang malah dapat meringankan loading blog anda. Untuk membuatnya tidak  perlu edit pada kod html  dan anda cuma perlu pergi kt design >> add a gadget dan cari html/javascript..

    masukkan kod di bawah ini :
    <style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #666666;
    background:#F5F5F5;
    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.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">
    MASUKKAN CODE SHOUTBOX KORANG KAT SINI
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
    Note :
    1)50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.
    2)color merah itu masukkan code shoutbox anda.

    Jika mahir dalam editing anda boleh ubah color and word, anda boleh gunakan adobe photoshop..

    0 comments:

    Post a Comment

     
    Copyright (c) 2010 Stylish Tutorial by Secret Profile
    Any FAQ ? : Contact Me| Forum| About Me