Shoutbox/Buku Tamu Show-Hide Di Samping Kanan Blog

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: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/AVvXsEh8VzVCu3M-flslwAXhPlMADK3beNAkf_PY-I_65wtdeNEGl9izGGj0y0oi2vipYgkxzTAplQ89CYtMs-LVJsxPoQN6z3Ld-EeVoJaCZsNOUh0xltk_wFpIaPl6ZUZptZpnCMRxvriFK0RC/') 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 buku tamu anda di bawah ini -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<small>Widget by: <a href="http://rezdown7.blogspot.com/" target="_blank">Rezdown7</a></small>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
• Kode Yang Berwarna Hijau Silhakan Anda Ganti dengan Tombol/gambar anda Sendiri,,Jika Tidak ingin pun Tidak apa2
• Kode Yang Berwarna Biru adalah untuk warna Border = Warna Garis Pinggir ,, Background = Warna Latar belakang.
• 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

Source: rezdown7.blogspot.com