Bikin Show Hide Chat Box dari Atas

Assalamu'alaimkum wr.wb
halo teman-teman ..
kali ini saya pengin kasih tau cara bikin Chat Box Show Hidenya dari atas ..
maaf klo gk ada tutorial cara bkin chatbox ..
soalnya kalian cuma search google ajja ketemu .. hehehe ..
Buat Yang master-master lewat aja dah ..
1. yang pasti Login dlu --> Rancangan --> Tambah Gadget --> HTML/JavaScript
2. masukan code di bawah ini

<style type="text/css">
    #at{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #at{position:relative;}
    .attab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .atcontent{
    float:left;
    border:2px solid #999;
    background: #000;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    -moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
    }
    </style>
    <script type="text/javascript">
    function showHideAT(){
    var at = document.getElementById("at");
    var w = at.offsetWidth;
    at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
    at.opened = !at.opened;
    }
    function moveAT(x0, xf){
    var at = document.getElementById("at");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    at.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="at">
    <div class="attab" onclick="showHideAT()"> </div>
    <div class="atcontent">
    <div align="center">
    <div style="background:transparent;">

(Simpan Shoutbox Anda Di sini)
 
       </div>
    </div>
    <br />
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://lh5.googleusercontent.com/-r1i4MbA737M/TXe_geYYU9I/AAAAAAAAB5A/PgOy7-VjLAE/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

    </div>


    <script type="text/javascript">
    var at = document.getElementById("at");
    at.style.top = (-200-at.offsetWidth).toString() + "px";
    </script>

    <div style='display:scroll; position:fixed; top:100px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i1094.photobucket.com/albums/i446/aqbarvall/GuestbGambarPNG30x130.png"  /></a>
</div>

3. Simpan Deh dan Lihat Hasilnya

2 ... Skip ke Kotak Komentar

8 April 2012 07.00

Menarik untuk dicoba,nih.

27 Juni 2012 11.39

nice posting gan.. langsung ke TKP nyoba nih trik

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]