Cara pasang Chat box showhide dari atas

Postingan saya kali ini akan membahas cara memasang Cbox showhide,sebenarnya sudah banyak banget yang  membahas tutorial ini,tapi nggak ada salahnya di bahas ulang kali aja ada yang tertarik :D nah, biasanya khan kebanyakan cbox munculnya dari samping,tapi yang saya bahas kali ini muncul dari atas jadi kalo mau buka Cbox harus mendongak ke atas gitu..wakakak,,XD..langsung saja  : Pastikan anda sudah punya akun cbox sendiri kalo belum punya silahkan daftar di sini Gratis !!
caranya:
1.LOGIN ke blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :

<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(URL);
    }
    .atcontent{
    float:left;
    border:2px solid #7FFF00;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1zceI81jdI40R-QGV_4E9eW39vaDcdUqo2vNrPWqZUSIolbJm6_QeEDpa1FHKtomXtA7P8pQw7qxouvXmUrdr3aQL0oq9ll0Du7aHVwZC8xwN7NTdn2eKQQF7KF0cNk-YTjAYQLiivps/)#000000 repeat-x bottom center scroll;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    padding:10px;
    }
    .atcontent:hover{
    border:2px solid #fff;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9xxmsfvZS3T-xSvRePG72sQAfsYhgxHKS7LrwvuSs20JSVy_KjcCIJ_9QdlU1oC8ne89t9Ry0xCNnXH2pDWVhnDsz9ma9CBcZEyJJ9KC5yJ08tAxS2AuHKd7JpcBSR8OtnjC-SDWkCQo/)#000000 repeat-x bottom center scroll;
    }
    </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:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

KODE CHAT BOX DI PASANG DI SINI
   
 </div>
    </div>

    <br />    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox" /></a></div>
    <div align="left"><font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-membuat-buku-tamu-blog-showhide-di.html"target=_blank"><div style="color: #444444;">
    <span style="font-size: xx-small;">By Utta</span></div></a></font></div>
    </div></div>

    <center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcMxZGMwS4C8KXsoT6O5PeHrIpvp_QKH69YJUuQqrTSjs6zf_BuKG3N19SUMeNpZhThR9gfovBxn2JQDEMpn09xmtHLX41gmXIDm-gEjOHG3L1gKpHN3qFWjj-ud_ARmNuo1NgL_kzxI/" alt="cbox" title="Click here to open Guest Book" /></a></center>

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

*Keterangan - Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat) - Yang Berwarna merah adalah background cbox
- Tang berwarna biru ganti dengan kode Cbox
- Yang berwarna kuning adalah URL icon navigasi Close 

sekian semoga berhasil :)