Cara Membuat Chat Box Melayang

Hallo sobat Blogger hari ini saya akan membahas tentang cara membuat Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.




Ok langsung saja ke Cara Membuat Chat Box di bawah, atas, kanan, kiri Blog :

Login terlebih dahulu ke blog sobat

Klick Design -> Pilih tata letak -> Tambah Gadget -> Pilih HTML/Java Script.




Copy Code di bawah ini setelah itu paste di HTML/Java Script .

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfcmbT_ItIaM7erHvetNzs1I4DrhHxXALWlQPtMdSGLM1Y60dImqVuj7ayRYxkYPpaSPwAxMiJf9N_iHacRn6mFSDGufgvfKanvq88giZP89VRpkK1xpPi0j03pl7v5OGbh7ClT9uEPNE/s1600/2131wkl.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" flashvars="id=187289954" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br /><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=187289954">Go Large!</a></small><br />

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik  <a href="http://1sfgate.blogspot.com/2012/12/cara-membuat-chat-box-melayang.html">
disini </a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</embed></div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



Bagi sobat yang ingin mengganti tombol Cbox bisa lihat kode nya Dibawah sini! :


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlCRjvoKnGwBwBGeq054xvG2tayfW__f2eF0s2-w9hyphenhyphenwjAoyGgTXlBZlnuLpF0qVR8rbaN0Yb_dXnCu9TBdZLrFgKFJ2XpZYMeqg413aXQXKcJz0mFLv0w7kR-jsM8pNDPtjurfsXo-w/s1600/Chatbox.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_I8MwinWfDJq228iBXyeMpCM08gYN7WderGq43PhBiUbOIR-p7jXGWFbr2aHOielorrryMMIPeWf3TKc9dMdzPwL9LVXzfKL6dMpQ33rPvNyfz3UaP1dV-YrdSEkOFK_CqShLQdYONY/s1600/Bukutamu3.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXGSWuPOy_c61CNnD2vEGsbCrOr-DPKMwX9vCYBY731z6625EQU_4wtAN28iteTQPHEwEPbS2QlvavH9mMKatydNgSdoeM7NoK5k1yzk-XapBUYHfB_FpdYl-t6nzU_ltzcNtWvi2KRQ/s1600/bukutamu2.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYofq2tm7tYVpfopOTBlnLTaQaxXrD63x1EwWafvwjMa6RcLhF3lLMBuJfHyXNWT3srI_UArsKzTL9gpxgP8wQUuYULkYuCHdJqTOTsD2H04XRPrxQuTglbB_phJHFOirWYKA6tcUNkw/s1600/bukutamu5.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfcmbT_ItIaM7erHvetNzs1I4DrhHxXALWlQPtMdSGLM1Y60dImqVuj7ayRYxkYPpaSPwAxMiJf9N_iHacRn6mFSDGufgvfKanvq88giZP89VRpkK1xpPi0j03pl7v5OGbh7ClT9uEPNE/s1600/2131wkl.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6hUuAhiGm41dHx23BqTAfrAinLcSQIP1p_bbsNOLvnedcW4DSLPTUbBezgMoBxe-buvrnFWBgPE8ToufVRUb1P7AbBjm2ZPDMaQGpSwQ47lGndwROx1QzUbwRV_arhVoznyakXlpGs8/s1600/bukutamu4.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUbiYHYfvN87xCji1t0cPbdnY3eSXJeHinVzUo9n2G_Ee0-9H3xiF2HOpJZRb_DSqPaGEsI15ddthE_vr3eKbeFPVqPcTuOM0stfhZoudVTIkFJ2_gy1aQqvL1Y_U9MBwfK8nzqI1B00/s1600/BukuTamu1.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QgmnX4jP_UOCtPjBJAkO8XPnbUDYHmSezpHcPcPHNJqRfqztetUiVJka3o5XIYx0Im8lJbow2Uk7py-TuxQ73L7nkIfxFchEsrq-rtNvS4Z642qPIlQUoEsddg4TMOuiM_Z1PADiQh8/s1600/Bukutamu6.gif

Klik Simpan / Save dan lihat hasilnya.