Membuat Efek Melayang ShoutBox

Sebelumnya kita telah membahas bagaimana membuat Chat Blog Sederhana menggunakan ShoutMix, kali ini akan membahas bagaimana memberikan efek melayang pada ShoutBox yang telah kita buat sebelumnya..

1. Langsung saja buka script atau edit script chat yang telah kita buat sebelumnya
    [Design - Page Elements - Pilih edit pada gadget ShoutBox kita]
2. copy script di bawah ini

<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://lh5.googleusercontent.com/-11D5uLwFoXg/TsDE88TVysI/AAAAAAAAAh4/a8TP5XtOKgs/s128/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #C2C0C0;
background:#DBDADA;
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">

<!-- Begin ShoutMix -->
<iframe id="shoutmix_05c2ca" src="http://sht.mx/05c2ca" width="240" height="480" frameborder="0" scrolling="auto">
<a href="http://sht.mx/05c2ca">Join the conversation at ShoutMix</a>
</iframe>
<!-- End ShoutMix -->


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

Keterangan:
- untuk tulisan yang berwarna biru adalah tulisan Write Here bisa di ganti dengan gambar yang di inginkan
- untuk tulisan yang berwarna merah adalah script ShoutBox yang telah kita buat sebelumnya, ganti dengan script kalian