Cara Membuat Buku Tamu Tersembunyi di Blogger

Cara Membuat Buku Tamu Tersembunyi di Blogger

Widget Buku Tamu / Guestbook dapat anda pasang di blog anda dan letaknya akan tersembunyi, namun apabila cursor mouse diarahkan pada tulisan / widget buku tamu maka secara otomatis widget buku tamu / guestbook akan muncul dengan sendirinya. Dengan menyembunyikan widget buku tamu atau guestbook ini akan membuat ruang blog anda semakin irit Jika anda tertarik dengan tutorial blog mengenai cara membuat buku tamu auto hide di blog silahkan simak caranya dibawah ini.

Untuk membuat auto hide buku tamu/shoutbox tentunya anda harus mempunyai widget buku tamu. Anda dapat membuatnya di http://www.shoutmix.com/ atau penyedia layanan buku tamu lainnya atau langsung saja cara detailnya klik link cara membuat dan memasang buku tamu di blog.

Cara membuat buku tamu tersembunyi / auto hide di blogger.
1. Login ke blogger
2. Pilih Tata Letak => Tambah Gadget => Html/javascript
3. Masukkan kode berikut kedalam Html/javascript

<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://2.bp.blogspot.com/-83yQomAsK18/UTALQekg8UI/AAAAAAAAAck/rKilGtgKL9I/s1600/buku+tamu.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 script buku tamu disini
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank"href="http://bloggerbondowoso24.blogspot.com/2013/03/cara-membuat-buku-tamu-tersembunyi-di.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>

Keterangan :
Silahkan anda ubah teks warna merah dengan kode buku tamu anda.

Silahkan diterapkan tutorial blog tentang Cara Membuat Buku Tamu Tersembunyi di Blogger, semoga bermanfaat untuk anda semua, selamat berkarya.