Cara Membuat Chat Box Melayang Dari Atas

Cara Membuat Chat Box Melayang Dari Atas - Chat Box adalah salah satu widget yang biasa digunakan oleh blogger. Chat Box juga biasa disebut Buku Tamu karena fungsi widget ini adalah sama seperti buku tamu atau pengunjung dapat meninggalkan pesan kepada kita melalui widget ini. Jika biasanya widget ini muncul dari pinggir kiri / kanan blog . Tapi kali ini kuas akan berbagi cara yang beda dari lainnya karena widget ini akan muncul dari atas blog . Gimana ?? Keren kan ?? Langsung saja ketutorialnya :

1. Seperti biasa Log in di blogger

2. Kemudian pergi ke menu Tata Letak , kemudian klik Tambah Gadget. PilihHTML/Java Script .

3. Copy kode dibawah ini kemudian pastekan di HTML / Java Script 

 <style type="text/css">#gb{position:fixed;right:450px;z-index:+1000;}* html #gb{position:relative;}
.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url();}.gbcontent{float:left;border:2px solid  #0F0;background:#ffffff;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomleft:15px;-moz-border-radius-bottomright:15px; padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">
<!--  Script Chatbox nya disini -->
<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>
</center></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.top = (-400-gb.offsetWidth).toString() + "px";</script></div>
<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOC7AEueWCFW5JFSvqVb2C2v20jW2CFuOBFEq9Fd6rKtr4SmjsrVhAB02jOh6e0UVpZ7psOf4aci1YskEkNHFAMyz7jWTWuWazfvuUdVKpiWLRr8j_PsYc_Mtoxqcwunjq0v-bUPWnviAw/s1600/cbblue.png" border="0" /></a>