Cara Membuat ChatBox Melayang di Blog

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/AVvXsEgbTNLbWupqB2gCTJuEzpNaYnIRo6i8_sPXqD8RI0oEmRvQYmVToCU1RfxzcCkWuzSG5o6a-xKvXA88GpcSGNkWv8QITFVyzkGbG6O4u5TzNPs_VKDwO1Z35rhqpTlg7kjArjsf2EeVjOM/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/AVvXsEgHFzRvNjkT2QeIy7tSRlEn0lW2tnNcORPItUOj6zi-jmBnzAVswo2QBm_7U8-H0t-A9U0gt2uwX7iKnvV9w-89ZZUKhlB5NC9CS8TM3sRbGMdAj-rLOMVMUyra36Ud1Qmrnj4UzRvXljU/s1600/Chatbox.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIHjnt83Whw9C4lEGZLh02VG7u6OXKKrA9FG_ajmB-6iStw2PRatk4F-t69C6kEbzyEWaGlBXtSuPkvVwbG82AVAwb3JdfJQ88xzAM79vIW46Xg3c9dpiC6LoiTaEcWrrHnRZDvm8n9Q/s1600/Bukutamu3.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8Xhfoccjz1OIZREUrXYHiQlIOWvBWq2wzvSN6nSR3xA8lNTmbGLzwPcmDOz8ve7OsxqCwp9N0CPcgN8HyvtwU8XwvZyW7Q1-2YebIh1E8rLlk3gUQUydvYQJoc-U24HpAGQb-Y92RrU/s1600/bukutamu2.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDb_EZ_uEMi1eXWFIJbAZUd96UFvvMp43IdWrZsm8pqgWvvL_J-Bx5rEVjbTHNVyobTMAEiqsS6ZF21uk9oFPlEHRq7lt3jvkui1ZvmJuiNz_OXA9MtoUj8ikkDQcee3rk-YOcigGcwiM/s1600/bukutamu5.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbTNLbWupqB2gCTJuEzpNaYnIRo6i8_sPXqD8RI0oEmRvQYmVToCU1RfxzcCkWuzSG5o6a-xKvXA88GpcSGNkWv8QITFVyzkGbG6O4u5TzNPs_VKDwO1Z35rhqpTlg7kjArjsf2EeVjOM/s1600/2131wkl.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8JrzxdZ3eCBCOQv8adCl_pN3UAAPmpox9SKxlAUR5NwCy761pL8PtcGjVsg71Oq6UEuwa-H_NjFa9vdoSwQlFDO9AoYnf_P7QhTPy5eHs3oIv4gRkfOSvqC4eMcdCL292bLX0BZr7u0/s1600/bukutamu4.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh03z6wm7wn7X5Wdv0AwkLrq_lWg6Lkk3NBzhUpxD2-iFT5QnCw51mR-gJbWJMG4GIo-fgxa9M0mEamdnJN7-fxniZgLNSf-DaZr0g713k3pB4FnzTuhDyz5O7-gRWAu4IFBUvGJGE8ULQ/s1600/BukuTamu1.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wzrS18fQdYJdKmKFLYnoO3paIpNnDOJCFXA6cTK8FLWaxpqvBLvqq-Ci9OMfCwxyRv_74PYwNQ_Jt9wo8wbpKXk65Yxs6W02oNnoZCeyUBlHhAYTA3VuivnJIITZ2GXQZGqfJbGo6dI/s1600/Bukutamu6.gif

Klik Simpan / Save dan lihat hasilnya.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat ChatBox Melayang di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://azka-veiro.blogspot.com/2013/03/cara-membuat-chatbox-melayang-di-blog.html" target="_blank">Cara Membuat ChatBox Melayang di Blog</a>

:: Get this widget ! ::