Membuat Buku Tamu Show-Hide di Blogspot

Ketemu lagi nih sobat blogger, Kali ini saya ada sedikit tutorial bagi para sobat blogger yang ingin menampilkan widget Buku Tamu alias guest book di halaman blognya. selain sebagai sarana saling sapa dan menyampaikan komentar singkat, buku tamu akan menjadikan nilai lebih dari seni Blog dalam ber-interaksi antar sesama blogger atau pengunjung.

Nah, kali ini saya akan berbagi tips cara menampilkan buku tamu yang bisa show and hide, jadi gak akan bikin penuh halaman sobat karena kebanyakan widget yang nongol. Biasanya buku tamu ini terletak di pinggir sebelah kanan halaman utama blog. Singkat cerita nih, ikuti tahapan cara berikut ini :

1. Login dulu blogger sobat.
2. Kemudian, klik menu Desain
3. Klik Tab Tata Letak
4. add New Widget
5. Pilih New Html
6. setelah jendela html terbuka maka copy - paste code script di bawah ini :

<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/AVvXsEg__rs58SHQbFReyqu99E_fZzMB2DfGb4AhYGEYVg8sYIVU_1gYy-F7S6HDXa2xk0PR15x7TIHxda7yZtz2iQJs6NpJKVp1OA0of65wSUo0Wi11W_rStFLYSGdxKB_VkaBssO75-9W_iCBe/') 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">

< Ganti script warna merah ini dengan script cBox anda >

<div style="text-align:right">
<a href="javascript:showHideGB()">

</a>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

7. Ganti tulisan yang berwarna merah dengan script cBox sobat
8. Lakukan save.... Lihat hasilnya :).... bagus kan....

Apabila sobat tidak ingin menggunakan cBox yang servernya Luar Negeri, sobat blogger bisa menggunakan alternatif lain yaitu dari server Indonesia. seperti aplikasi chatnya c-box, gratis daftarnya dan loading aplikasinya cepet kok.

Semoga tutorial singkat diatas dapat sedikit membantu sobat-sobat Blogger semua... salam... :)