Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog

Auto hide Shoutbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula (di lewati pointer mouse), hanya beda sedikit dengan buku tamu show / hide. 

Buku tamu berfungsi sebagai cara lain untuk visitor berkomentar dalam suatu blog dalam cara yang instan dan mudah. Kita akan di mudahkan untuk berkomunikasi atau berintraksi dengan visitor dengan mudah melalui buku tamu ini. Bagi kamu yang berminat untuk mencoba widget buku tamu ini, yuk mari kita simak...



1. Silakan pergi dulu ke Cbox
2. Daftar disana atau bisa klik disini, setelah berhasil daftar, login ke Cbox dengan akun kamu tadi
3. Setelah itu, kamu isikan data-data yang di perlukan, dan copy kode HTML buku tamunya..
4. Langkah selanjutnya, masuk ke akun Blogger kamu
5. Pilih Tata Letak > Tambah Gadet > HTML/JavaScript.
6. Copy kode berikut, dan pastekan di box HTML/JavaScript.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwbFab5RpYYUtKQt1VxL8NYM9_15okbd9IF3DAtj0hSoMK7VQgt0MtyqHL9Waae28fgC0lQDrrmVVm7x75SPkoryzxKrISCyCvsSng7xsYiKpHIrGntoMZ0Lre91fz-6QmwTb9OTv_pA8/s1600/bukutamu.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">
Kode Cbox kamu disini
<div style="text-align:right">
<a href="http://hilbramkurnia3.blogspot.com/2013/03/cara-membuat-buku-tamu-tersembunyi-di-sisi-blog.html">.:get this widget:.</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

*Keterangan: Ganti kode yang berwarna merah, dengan kode HTML Cbox yang sudah kamu dapat di langkah no. 3

7. Setelah selesai, klik Simpan....

Dalam kode script diatas kamu bisa ubah dengan sesuai selera kamu sendiri dan tunjukan kreasimu.. Sekian postingan kita pada hari ini, semoga bisa membantu dan jika ada kekurangan kami mohon maaf. Semoga Bermanfat.......

Sumber

Bagikan Artikel Ini