Cara Pasang Chat Box Atau Buku tamu muncul dari atas /Show Hide

Sudah beberapa kali gw ganti chat box atau buku tamu tapi semua yg gw pasang ga cocok di hati, tapi setelah sekian lama berselancar di internet akhirnya ketemu juga yg kena di hati. 

                                                                

dan jika anda berminat, ikuti langkah berikut:

untuk cara mmbuatnya Cukup Kopi paste kode berikut pada menu  Rancangan, Edit Html, Tambah Gadget, dan Pilih Html/Java Script :

<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:#000;">


<!-- Ganti dengan Kode cbox, shoutcamp atau shoutmix disini -->


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNI4_f-G1WcYBK9rCpGRgp1Y71PRtEtk092UsSOHIr51Pk09tPh9xTsnEOSgOWpsyzXFenfNkIQzcHt5voyu-eKknHgciGX5B359L7NYrt1vol-nr6gk1P4IRtC9CuNRaHVSzw2g7PH0/s1600/CLOSE.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>


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

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvSwqtvTGZoAWLxJrIz_wv7FauqShJNiMXlbAzuYTG2nfdV-xJW_3GEnmBeQuIOvMkDv4r_nYr5tpx3MgCW12kz9dqMD1rSj-6qGH9bjHfJ26rKz0Qs6mvNP97UHzWesiIKm_bsjNiDS0/s1600/guestbook.png" alt="cbox" title="Click here to open Guest Book" /></a></center>