Cara Membuat Chat Box Muncul Dari Atas

Malam ini saya akan share tips dan trik "Cara Membuat Buku Tamu Muncul Dari Atas". Gak banyak basa basi langsung aja kita praktek.
Seperti biasa :
•Login blogger
•Rancangan, Tambah Gadget, Html/java script
•Dan Simpan 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(); } .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><br /> <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><br /> <div id="at"><div class="attab" onclick="showHideAT()"></div><div class="atcontent"><div align="center"><div style="background:#000;"><br /> <br /> <!-- Simpan Kode cbox atau shoutmix nya disini --><br /> <br /> <br /> </div></div><br /> <br /><br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IPDDeeHQNypz_hTyl8j11NOc3guChwBBiw1sVPCfnQ67-Bj9o5LJ68Hi8ngE2EUhqxcG_8x8DMJdiv_0M-6woJuT2kbU_GTxEc-TbxckYaJNvLSszclHMA93ob8HqkKmksWUYoLhWri7/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div><br /> </div></div><br /> <br /> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script><br /> <br /> <center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFB_HoRDfTTGt7VKxJgkPvXhhyphenhyphenE5iJhmY1bl8hbqNFzGVF2fYfRvJOtY8f3x9fP9AtCmL2zwq0FYb3ygYw0FIB6xcQtLm80UApUMIQ9xJI0BY71dyrnh5JFbJRZWitLJvpqIYM7lJf8rOh/s1600/Chatbox.png" alt="cbox" title="Click here to open Guest Book" /></a></center> <br />

Catatan:

Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini

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

Dengan Kode di bawah ini:

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFB_HoRDfTTGt7VKxJgkPvXhhyphenhyphenE5iJhmY1bl8hbqNFzGVF2fYfRvJOtY8f3x9fP9AtCmL2zwq0FYb3ygYw0FIB6xcQtLm80UApUMIQ9xJI0BY71dyrnh5JFbJRZWitLJvpqIYM7lJf8rOh/s1600/Chatbox.png" /></a><br /> </div>

Lihat DEMO di sini
Semoga Berhasil.....