Cara Memasang Chatbox Atau Buku Tamu Tersembunyi Di Blog

Widget Blog Buku tamu atau chatbox merupakan widget wajib bagi setiap pengguna blog dimana buku tamu ini sangat banyak manfaatnya selain untuk mempercantik tampilan halaman blog chatbot juga berguna sebagai sarana untuk saling berintraksi antara pengunjung blog dengan pemilik blog atau pengunjung blog dengan pengunjung yang lainnya sehingga semuanya akan saling terhubung akhirnya bisa saling mengenal satu sama lainnya, untuk itu sebaiknya sobat bloger Captain-Kid yang belum memasang bukutamu pada halaman blognya segera pasang, apabila tidak tau bagaimana caranya bisa baca tutorial Blogspot sebelumnya mengenai Cara Membuat Buku Tamu Di Blog.

Namun terkadang Widget chatbox sangat menguasai lokasi pada halaman blog karena ukurannya yang terbilang cukup besar sehingga banyak orang yang mencari cara untuk mempatkan chatbox atau buku tamu ini pada posisi yang se efisien mungkin dan salah satunya dengan cara meletakan Chatbox atau buku tamu tersembunyi pada halaman blog seperti dibawah ini.

img by abrian-pamungkaz.blogspot.com

Buat sahabat blogger Captain-Kid yang juga ingin memasang bukutamuya seperti pada gambar diatas bisa menerapkan tutorial blog kali ini tetang Tutorial Cara Memasang Chatbox atau Buku Tamu Tersembunyi Di Blog. 

Berikut langkah-langkah nya untuk memasang buku tamu tersembunyi pada halaman blog

1. Silah sobat login ke akun bloggernya terlebih dahulu
2. Pilih menu Layout atau Tata Letak

3. Klik Add a Gadged atau Tambah Gadget

4. Pilih HTML/JavaScript

5. Copy Code berikut dan letakan pada Box HTML/JavaScript yang sudah sobat pilih tadi

<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('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat; } .gbcontent{ float:left; border:2px solid #666666; 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"> KODE CBOX <div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a> <a href="javascript:showHideGB()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Keterangan : Perhatikan Tulisan KODE CBOX silahkan sobat ganti Dengan kode chatbox atau kode buku tamu sobat Sedangkan Kode http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png ini adalah URL Gambar Tap ChatBox
6. Klik Simpan
7. Selesai dan lihat hasilnya

Secara Default tampilan tap Chatbok adalah bewarna hijau seperti gambar dibawah ini

Sobat blogger bisa menggantinya dengan mengganti URL gambar tersebut Dengan dengan URL gambar milik anda sendiri. Letak URL gambar pada kode diatas adalah pada bagaian yang berwana Hijau. Apabila Sobat ingin mengganti Tap tersebut agar sesuai dengan halaman blog sobat Dapur Tutorial Ada beberapa koleksi Tap Buku Tamu bisa sobat lihat di Koleksi Tap Chatbox Atau buku tamu.

Demikian Tutorial Blog Tetang Cara Memasang Chatbox atau Buku Tamu Tersembunyi Di Blog ini bisa bermanfaat untuk sahabat blogger Dapur Tutorial semuanya.