Membuat Kotak Komentar Buka Tutup (Melayang)

Gak banyak Cerita nih, langsung aja, deh…, pengen punya buku tamu (Kotak Komentar) letaknya ada di sebelah kanan Tampilan Blog Sobat kayak punya ane…, ikutin deh langkahnya yaa..

1. Login ke Blog Sobat
2. Pilih Rancangan
3. Pilih TAMBAH WIDGET, kemudian pilih HTML/Javascript
4. Copy paste Script dibawah ini nih :

<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/AVvXsEhXaK2WaOqDSehjPhDlHEMsue1yYNn84b0oixK7ZD3ka8bgE8Jfo_qwe97zs8ZoZS29d8mMd7EgulHcOxmNraDgtVsl4_OwDCNKTDPeHyeuYuIOu2E5Oo0hJyesHE0QbFShBpRqaG2fWpca/') 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">

Masukkan kode Shoutbox SOBAT disini

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

</div>

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

5. Lihat deh hasilnya…eng ing eng…