Cara Membuat Buku Tamu (CBOX) Auto Hidden

Cara Membuat Buku Tamu (CBOX) Auto Hidden; Buku tamu (CBOX) bagi para Blogger di Indonesia dianggap sangat penting dan berguna sebagai sarana untuk saling sapa antar blogger, itulah alasan kenapa blog milik orang indonesia rata-rata pasti ada yang namanya CBOX atau Buku Tamu.
Pada umumnya CBOX yang terpasang pada blog selalu muncul dari sebelah kanan maupun sebelah kiri dari halaman blog dan ada juga yang membuatnya sebagai menu pilihan yang berupa link dan akan muncul jika link tersebut di klik. Dari sesuatu yang sudah umum tersebut saya mencoba berbagi kepada para pengunjung Aditya Blogs tentang CBOX yang mungkin juga sudah umum akan tetapi banyak yang belum tahu yaitu Cara Membuat Buku Tamu (CBOX) Auto Hidden artinya CBOX ini akan muncul dan tersembunyi hanya jika tersentuh oleh cursor mouse dan kita tidak perlu melakukan klik pada CBOX tersebut.
Nah jika dari sekian pengunjung Aditya Blogs yang mungkin berminat untuk memasang cara ini silahkan copy saja kode yang dulu saya gunakan dan saya copas langsung berikut 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGtxevpbb6LYyHuaZEWriVWvZZEf4bh_NocfUHfHR2aBwq_ac_G6zmpBt4-OpnpeYJIhPVMOHgtGP_Q-lAWXfrvaRpt57AeJ3eq4vY5wdHa2_mLeD7FUlAF8VLgw-ToqQs6lTGACx9Xbx/h120/CBOX+tab.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>

"Letakkan kode cbox anda disini"

<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://bl1t4r.blogspot.com"> 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>

Silahkan anda edit height:150px; width:50px; top:20px; dan sesuaikan dengan kondisi blog anda karena tiap template tentunya pasti berbeda-beda kodenya sehingga bisa mempengaruhi kode yang lain.
Berhubung sedang tidak mood jadi saya akhiri dulu postingan ini sampai disini, selamat mencoba dan semoga berhasil.

Tweet