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:

  • Trik Jitu Rampingkan Alexa RankKali saya akan sedikit berbagi sedikit tips mengenai merampingkan Alexa Rank.. Walaupun pernah saya bahas sebelumnya namun apa salahnya kini saya bahas kembali.. Yah kali ini juga saya agak sedikit melenceng dari judul Trik J… Read More
  • Melacak IP AddressOk sobb.. kali ini saya ingin berbagi cara menampilkan IP Address pengunjung blog kita.. Langsung saja y sobb tak usah bertele-tele..Pergi ke http://www.wieistmeineip.de/banner/ Setelah itu anda akan diberikan kode scriptnya … Read More
  • Cara Blogwalking dengan Tampilan Mobile di PCAssalamualaikum Wr. Wb.Nge-Blog adalah hal yang sangat mengasyikkan sekali, bukan sekedar berbagi pengetahuan untuk sesame, kita juga bisa menjalin hubungan persahabatan antar sesama blogger dan semua itu tidak terlepas denga… Read More
  • Kumpulan Script untuk BloggerKali ini saya akan memberikan sedikit script yang mana bisa membantu kalian untuk mempermudah artikel bolg anda bisa terdeteksi dengan mudah bagi pembaca setia blog anda.. Berikut adalah scriptnya..Script untuk Recent Comment… Read More
  • Tentang Google AnalyticsTentang Google AnalyticsGoogle Analytics merupakan layanan gratis yang disediakan oleh sang google yang menampilkan statistic pengunjung sebuah situs atau web. Google analytics dapat menelusuri pengunjung berdasarkan informas… Read More