Tutorial 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 Dapur Tutorial Blogspot yang belum memasang bukutamu pada halaman blognya segera pasang, apabila tidak tau bagaimana caranya bisa baca tutorial Blogspot sebelumnya mengenai Cara Menambah Widget Chatbox atau Buku Tamu Ke Halaman 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 tutorialuntukblog.blogspot.com

Buat sahabat blogger Dapur Tutorial Blogspot 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">

KOD SHOUTBOX DISINI

<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 KOD SHOUTBOX DISINI silah 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 Gambat 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 Yang Sesuai Dengan Halaman Blog

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