Hide shoutbox sliding atas bawah


Cara nak sembunyikan shoutbox dan bila tekan je akan keluar dgn cara sliding atas bawah
stepnya

Log in blogger =>design =>layout=>add gadget =>html/javascript








<style type="text/css">
    #gb{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #gb{position:relative;}


    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .gbcontent{
    float:left;
    border:2px solid  #99CCFF;
    background:#ffffff;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 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">

KOD SHOUTBOX SENDIRI



    <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>


    </center></div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.top = (-400-gb.offsetWidth).toString() + "px";
    </script>


    <a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu"heigth="125"src="http://i1108.photobucket.com/albums/h416/hana611/shoutboxcopy.png" border="0" /></a></center>

MsoNormal">


jangan lupa letak kod shoutbox sendiri (lihat dlm kotak di atas tulisan merah letak kat situ kod berkenaan)

bagi tulisan biru ianya adalah button shoutbox  boleh buat sendiri atau cari pada blog tutorial yg ada sediakan  button berkenaan ...


 jangan lupa SAVE

TQ & kredit tu nazirah (boleh klik & refer sini juga)
Jika step bergambar tidak jelas sila klik pada gambar ye..Try Jgn Tak Try Ok

0 comments:

Post a Comment