Cara Memasang Buku Tamu Tersembunyi (Auto-Hide)

Siang hari disekolahan mau menyelesaikan soal UKK 12/13, surfing sebentar malah nemukan konten menarik, yaitu Memasang Buku Tamu atau sering disebut CBOX. Pada kesempatan kali ini saya akan mencoba memberikan trik dan panduan tentang Cara untuk membuat buku tamu tersembunyi pada blogspot, sebagamana yang bisa dilihat disebelah kiri pada blog saya ini. Panduan atau tutorial ini saya dapat dari http://blogtutorials-01.blogspot.com. Yuk langsung aja ke TKP..

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (copy kodenya).

Sekarang mari kita ke blogger.

Cara  Cara Pasang Buku Tamu Tersembunyi pada Blogspot :

• Login pada Blogger
• Masuk mode Rancangan kemudian Tambah Gadget
• Pilih HTML/Javascript 
• Copy-paste kode 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/AVvXsEjgK5l6cHx9fnCADUWkFmQEJO-hFkzPQE8aJxxoJaY0osrP45ldpPWMvhyphenhyphenmk-_dFeW0yUE1BiB9TeG0i3kSJCk7ZMXWLmfviUCcemMsEFdz5VY8pIJZ3z08HfMOuDLmgkvBUGvt2xJoxIg/s1600/bukutamu.png') 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">
"Silakan Paste Kode Buku Tamu yang sudah di copy (dari cbox.com) tadi Di Sini"

<div style="text-align:right">

<a href="http://blogtutorials-01.blogspot.com/2012/03/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">

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

</script></div></div>

• jika sudah selesai silakan di Simpan
• Coba dilihat hasilnya..kereenn kan..