cara show dan hide buku tamu

Bagaimana  Caranya Membuat Buku Tamu Atau Shoubox yang Kita Miliki Posisinya Berada Di samping Page Sheet Blog kita???

Mau tau Caranya?? Namun Kita Harus Tau Lebih Dulu Apa Keuntungannya,,Menurut saya Jika Shoutbox/Buku tamu posisinya Show/Hide di samping kanan blog kita,itu akan mengurangi tempat di sidebar,,dan lebih memperindah blog kita (menurut saya sebagai pemula).

Ini di Caranya :

1. Silahkan Masuk Ke akun Blogspot anda dengan email dan password sendiri (: ,,setelah berada di Dsahboard klik Desaign

2. Pilih Posisi sidebar Dimana aja (tanpa mengisi kolom judul)

3. Klik Add a Gadget -->Pilih HTML/Javascript

4. Copy dan Paste kode berikut Di Kolom 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://i872.photobucket.com/albums/ab282/smpn1prambon/tamutulisan.png') no-repeat;

}


.gbcontent {

float:left;

border:1px solid #BB0000;

-moz-border-radius-bottomleft:10px;

-webkit-border-radius-bottomleft:10px;

-o-border-radius-bottomleft:10px;

-khtml-border-radius-bottomleft:10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

background: #000000 url(http://1.bp.blogspot.com/_O84nraTVNhw/TVAOSS5OUpI/AAAAAAAAAPs/SjzZrVNr21w/s1600/api.gif) 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 buku tamu anda di bawah ini -->


<br />

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

<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">

<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>

</a>


</div>

</center></div>

<script type="text/javascript">

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

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

</script></div>

Keterangan :

• Kode Yang Berwarna Hijau Silhakan Anda Ganti dengan Tombol/gambar anda Sendiri,,Jika Tidak ingin pun Tidak apa2
• Kode Yang Berwarna Merah sesuai bacanya <!-- Letakkan kode buku tamu anda di bawah ini --> Silahkan Anda sisipkan Kode Shoutmix/bukutamu anda Di Bawah Kode Yang Berwarna Merah Tersebut.

5. Klik Save dan lihat hasilnya