Membuat Auto Hidden Chat Box – Buku Tamu

By | April 19, 2011
Mungkin sudah banyak yang posting tentang cara membuat auto hidden chat box ini. Chat Box sering dikenal dengan istilah Buku Tamu. 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. 
Lalu kenapa saya posting ini kembali? Karena menurut pengalaman pribadi, banyak juga teman-teman yang membagi cara membuat Auto Hidden Chat Box ini tapi tidak begitu jelas sehingga membuat saya mumet dan harus bolak balik mencari di Google (jangan-jangan saya yang lambat loading..hehe). Ternyata mudah sekali caranya.

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:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
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 #1300F2;
background:#FFFFFF;
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 ShoutMix – http://www.shoutmix.com –>
<iframe scrolling=”auto” width=”160″ frameborder=”0″ src=”http://www6.shoutmix.com/?arisblogspot” height=”400″ title=”arisblogspot”>
<a href=”http://www6.shoutmix.com/?arisblogspot”>View shoutbox</a>
</iframe>
<br/><a href=”http://www.shoutmix.com” title=”Get your own free shoutbox chat widget at ShoutMix!”></a><br/>
<!– End ShoutMix –>

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

<div style=”text-align:right; font-size:xx-small;”>Jangan Lupa Senggol Anu Ku ๐Ÿ™‚ <a href=”http://arissugianto.blogspot.com” target=”blank”>Thanks!!!.</a>
</div>

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

Keterangan:
– Kode yang berwarna merah, silakan ganti dengan kode chatbox yang sudah Anda punya. Bagi yang belum punya, silakan membuat dulu di sini
– Apabila diperlukan, kode yang berwarna kuning dan biru silakan isi sesuai keperluan (lihat contoh punya saya), tapi apabila tidak diperlukan boleh saja dibuang dengan mengapus kode:

<div style=”text-align:right; font-size:xx-small;”>Jangan Lupa Ki$$ ๐Ÿ™‚ <a href=”http://arissugianto.blogspot.com” target=”blank”>Thanks!!!.</a>
</div>

 secara keseluruhan.

– Bagian yang berwarna ungu bisa Anda ganti dengan URL image Anda sendiri (kalau punya, tapi kalau mau pakai image yang ini juga boleh). Image yang ini maksudnya:
Photobucket

Saran:
Tidak perlu menggunakan judul gadget, dan letakkanlah di sidebar paling kiri dan paling bawah. Kenapa paling bawah dan paling kanan? Karena menurut pengalaman saya, kalau diletakkan disebelah kiri atau di bagian bawah postingan, maka bagi yang lambat loading internetnya, gadget chat box ini bisa saja tampil terlebih dulu menutupi layar (muncul di tengah-tengah halaman) sebelum akhirnya berpindah tersembunyi di bagian kanan secara otomatis. Itu cukup mengganggu bagi Anda yang memerlukan kesempurnaan… hehe..

7. Simpan/Save

Gimana mudah kan? Kalau tidak faha, berarti Anda sampa kayak saya waktu mencari cara ini. hehe..

Semoga bermanfaat

Tambahan:

Berikut image dengan berbagai warna yang dapat Sobat pilih sesuai keperluan blog Sobat:
1. Photobucket Biru
Link: http://i629.photobucket.com/albums/uu11/sugiantoaris/Chatbox.png
2. Photobucket Ungu
Link: http://i629.photobucket.com/albums/uu11/sugiantoaris/Chatboxungu.png
3. Photobucket Abu-abu
Link: http://i629.photobucket.com/albums/uu11/sugiantoaris/Chatboxabuabu.png
4. Photobucket Merah
Link: http://i629.photobucket.com/albums/uu11/sugiantoaris/Chatboxmerah.png
5. Photobucket Kuning
Link: http://i629.photobucket.com/albums/uu11/sugiantoaris/Chatboxkuning.png

27 thoughts on “Membuat Auto Hidden Chat Box – Buku Tamu

  1. darma_ccti

    seep gan,dah ane terapin…
    mo ganti gambar background blum ktmu yg cocok,jd saya pkai gambar dr agan ya
    he he he

    Reply
  2. Catatan si Boy

    @Rizky: Wah sayang dilepas.. hehe.. kalau untuk yg suka blogwalking pasti penting, sapa tau dia lagi malas komen jd dia bisa ninggalin pesan di chatbox dulu… mungkin pesan senggolan "anu", kalau ninggalin pesan senggolan anu di kotak komentarkan rada menakutkan… heheh

    Ok, ntar pasti sy tendang keras2.. haha.. thanks.. ๐Ÿ™‚

    Reply
  3. Ur-reference

    Thanks banget ya gan, saya nyari2 caranya udah lama nih.. Akhirnya bisa terpasang juga di blog saya. Nice share gan.. ^^

    Reply
  4. Anonymous

    Hello there! This article couldn't be written much better! Looking through this post reminds me of my previous roommate! He constantly kept preaching about this. I will send this article to him. Pretty sure he's going to have a great read.
    Thanks for sharing!

    My web page – Air Jordan Pas Cher

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *