Cara membuat Buku Tamu(Guestbook) Auto Hide Terbaru tanpa di klik terbaru 2016

Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog - Halo sobat blogger kali ini saya akan menjelaskan tentang Cara MembuatBuku Tamu / Guestbook Auto Hide di Blog  berbeda dengan Artikel saya sebelumnya tentang Membuatbuku Tamu buka tutup, Nah yang akan saya jelaskan ini buku tamu yang akan didampingi EFEK tanpa di klik (Auto Hidden)

Apa itu AUTO HIDEN Shuotbox??

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan akan tersembunyi secara otomatis tanpa di klik pula jika Sobat mengarahkan/meletakan kursor maouse pada widgetnya, hanya beda sedikit dengan buku tamu show / hide yang Di klik.

Gambar

Sobat penasaran?? Silahkan sobat lihat penampakanya dengan mengklik Link di bawah ini:

DEMO

Nah jika Sobat ingin memasang Buku Tamu / Guestbook AutoHide di Blog Silahkan Sobat bisa ikuti Langkah dibawah ini:

• Login dengan akun blog Sobat
• Masuk ke menu TATA LETAK
• Klik tambah gadget, lalu pilih HTML/Javascript
• Masukan kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

Pastekan KODE DIsini

<!-- END CBOX -->

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://anggavoith.blogspot.com/2015/01/membuat-buku-tamuguestbook-auto-hide.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Catatan:

Ganti kode yang berwara Merah dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Tweet