Membuat Auto Hidden Chat Box – Buku Tamu

By On Tuesday, April 19th, 2011 Categories : Serba-Serbi
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
Membuat Auto Hidden Chat Box – Buku Tamu | Si Boy | 4.5
Leave a Reply