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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdNxAfC7J9SGc6aqNC3o9HWv_iY8_tUJsqYgwzyQR49iK69VrFzsbyxCNdHMiNwqTa1mm7wRc8RCeZXeOqk-6j1jmw7steXueGj3aULBubpO9QLla-D6TwrBZSpyxwdIvYtT5tdBFuI204/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