Cara Membuat Buku Tamu/Guest Book Tersembunyi

Blogger Sukabumi - Apa kabar sobat? kabar baik pastinya, postingan saya kali ini mengenai cara membuat buku tamu / guest book tersembunyi.  Sedikit mengulas mengenai Buku Tamu/Guest Book dimana fungsinya sebagai tempat untuk melakukan percakapan online antara visitor dengan web/blog owner begitupun sebaliknya. Visitor yang akan memberikan komentar ataupun meletakan link/jejak di dalam  kotak guest book cukup memasukan nama visitor, alamat url/e_mail, pesan (message) dan klik go.

Ada pilihan widget guest book diantaranya cbox, dan para blogger banyak yang memakai widget ini. Bagi sobat yang belum memiliki guest book cbox silahkan kunjungi dan lakukan registrasi terlebih dahulu di  Cbox, untuk tutorialnya sobat bisa baca artikel tentang Cara Membuat Guest Book/Buku Tamu Di Blog

Bagi sobat yang sudah memiliki widget ini dan berniat untuk menghemat space/ruang dalam penempatannya, dan meletakannya secara tersembembunyi (auto hide). Posisi ini nantinya akan berada di bagian kiri dan muncul otomatis ketika tombolnya di klik. Silahkan sobat ikuti cara dan langkah di bawah ini :

1. Masuk ke akun blogger sobat
2. Pilih Layout  >  Tambah Gadget
3. Klik HTML/Javascript
4. Kemudian sobat masukkan kode di bawah ini ke dalam kotak javascr

<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/AVvXsEgOwG5nqUjdvsc4lSILvcNZuttvTXYNwm0064apV0K452locq4-Q9fxkXAAWw1IdlrcDTUvNU8ysnPZ0OnetETY8MX23M1CIdGwPodTh1ksYB-JUFl724CFuRNq_w4kekpx_Vy3MJLHfR-S/') 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">

< Letakkan kode cbox/shoutbox sobat di sini >

<div style="text-align: center;"><span style="font-size: 0px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://www.amronbadriza.com/" target="_blank">Blogaul</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

5. Silahkan sobat ganti tulisan warna merah <Letakkan kode buku tamu sobat di sini>  dengan kode buku tamu/guest book yang telah buat, shoutmix, cbox, ataupun  lainya tadi.
6. Sobat bisa mengganti url tombol guest book lainnya.

7. Simpan Template.

Selamat mencoba dan semoga bermanfaat.