Cara Membuat ShoutBox Show and Hide

Saya Sering menerima email dari orang" yang bertanya "KK gmana sih cara buad ShoutBox nya di samping yang seperti pnya kk ituh" Oleh karena itu saya menshare cara pembuatan nya
okeh langsung simak saja

1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu HTML
6. Lalu Copy kode berikut dan Paste-kan Pada kotak HTML



<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/AVvXsEi8xPWZesXWJzm-zVuVWrE8y7MP00QpKKukui5gPXSywrNMEveM7ZIIJddd29P3svfPdpM6bqw8Wm-OAICBOYj2XoXIWkpFubezaXv0yIDZSe9Jq-sRVwU9dnU2DAme-3qwwY8fC0FfQWiS/') 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">
<Letakan Code ShoutMix/Shoutbox Kamu Disini>
<div style="text-align:right">
<a href="http://ndraxs.blogspot.com/2011/03/cara-membuat-shoutbox-show-and-hide.html">
[Pasang Widget]
</a>|<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>



7.Klik Save..
Selesai,,,
Semoga Bermanfaat...