Cara Membuat Auto Hidden Chat Box


Pada kesempatan kali ini Bang Dayat akan share Cara Membuat Auto Hidden Chat Box, mungkin sudah banyak yang posting tentang Cara Membuat Auto Hidden Chat Box ini. Membuat auto hidden chat box ini supaya blog Anda terlihat lebih atraktif dan tentunya mengehemat side bar blog Anda., karena Buku Tamu ini akan otomatis tersembunyi ketika Anda membuka blog, dan akan terbuka ketika Anda mengklik untuk mengisinya. 

Ikuti langkah-langkah di bawah ini:
1. Masuk/login blog
2. Klik Rancangan/Design
3. Klik Elemen Laman/Page Elements
4. Klik Add Gadget
5. Cari Gadget HTML/JavaScript
6. Copas kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="230" height="275" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-693379" style="border:#DBE2ED 1px solid;" id="cboxmain6-693379"></iframe></div>
<div><iframe frameborder="0" width="225" height="60" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-693379" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform6-693379"></iframe></div>
</div>
<!-- END CBOX -->
<div style="text-align:center; font-size:xx-small;">Get This Widget<a href="http://anakgilaonline.blogspot.com/2012/04/cara-membuat-auto-hidden-chat-box.html" target="blank">Get This Widget</a></div>

<a href="javascript:showHideGB()">
</a></div>

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

Keterangan :
  • Kode yang berwarna BIRU adalah URL gambar kalian, jika punya gambar sendiri ganti URL itu dengan URL gambar kalian sendiri
  • Kode yang berwarna MERAH adalah kode Chat Box kalian.
Nah itulah beberapa langkah untuk Cara Membuat Auto Hidden Chat Box dengan mudah,  semoga bermanfaat bagi kawan-kawan semua.
Salam Bang Dayat


Related Posts:

  • Membuat Kotak Chat OnlineTentu kita ingin bukan membuat kotak chat online seperti halnya pada facebook. Kalian bisa mengobrol pada pengunjung dengan online layaknya facebook. Kali ini saya akan berbagi tips dengan kalian dan saat ini pun saya menggun… Read More
  • Upload gambar gratisKita pernah bukan untuk mempublikasikan di dunia maya hasil jepretan kamera kita agar bisa dilihat oleh orang banyak. Kali ini saya akan berbagi tips cara upload gambar secara gratis. Berikut langkah-langkah yang harus kalian… Read More
  • Membuat Kolom Artikel TerkaitKolom artikel terkait bisa membantu para pembaca setia blog kita untuk lebih mudah mencari sesuatu yang mereka inginkan.Berikut langkah-langkah yang harus dilakukan:Loggin Blogger kalianPilih RancanganKlik pada Menu Edit HTML… Read More
  • Tips meningkatkan pengunjungMemiliki situs yang mendunia merupakan impian kita semua terlebih dengan era informasi yang telah merajai dikalangan menengah keatas menjadikan internet suatu wadah sumber informasi. Kali ini saya akan berbagai berbagai tips … Read More
  • Membuat Bendera Pengunjung di BlogTentu kita ingin bukan mengetahui seberapa banyak jumlah pengunjung di blog kita dari berbagai negara agar kita bisa lebih percaya diri dalam membuat artikel dan mempengaruhi pembaca setia dari blog kita. Hal ini tentu akan m… Read More