Tutorial Membuat Buku Tamu Showhide Menu

Setelah Blogwalking sana-sini,akhirnya saya ketemu juga cara membuat buku tamu tersembunyi yang bisa dibuka tutup.Hemm,lalu apa gunanya??banyaklah,selain menghemat tempat,alias Ruang pada blog,selain itu juga mempercantik ruangan blog.Selain buat buku tamu bisa digunakan buat yang lain juga loh,Lalu bagaimana caranya??

Ikuti Langkah-langkah Berikut ini

1.Loggin Ke blogger

2.kemudian di dasbor,kamu klik rancangan/tata letak

3.kemudian add Gadget

4.Lalu pilih gadget html/javascript (lihat gambar)

5.Lalu copas kode berikut ini kedalam kotak gadget tersebut

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:136px; width:43px;
float:left;
cursor:pointer;
background:url('http://i1102.photobucket.com/albums/g456/yangpentingshare/cooltext520104928-1.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FF6600;
background:url('http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png')#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">

<!--COPAS KODE HTML MU DISINI -->


<div style="text-align:right;font:10px">

<a href="http://ypsrandy.blogspot.com/">YangPEntingshare

<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>

6.Save dan lihat hasilnya

Catatan:

1. Untuk kode html kalian bisa daftar dulu di Cbox atau shoutmix ataupun web lain yang serupa
2. Untuk kode html lain juga demikian(misal banner iklan,penggunaan lain juga,list follower dan lain-lain
3. Ukuran Width dan height dan Warna background pada code diatas bisa anda ganti sesuai dengan ukuran sidebar anda
4. gambar button(http://i1102.photobucket.com/albums/g456/yangpentingshare/cooltext520104928-1.png) pada code diatas hanya untuk guest book,Anda bisa mengganti button nya dengan url gambar lainnya 
5. Selamat Mencoba.....^_^