Cara Membuat ShoutBox Tersembunyi

Sebelumnya saya sudah menulis bagaimana cara tentang membuat shoutbox pada blog kalian.

sekarang saya ingin menulis cara agar shoutbox itu tersembunyi seperti pada blog saya ini 

kalian bisa melihat contohnya pada pojok kanan atas blog saya 

Berikut kodenya 

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

background:url('http://img709.imageshack.us/img709/4287/firevolvechat.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff4500;

background:#211f1d;

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">

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

<a href="javascript:showHideGB()">

[Close]

</a>

</div>

<!-- Begin ShoutMix - http://www.shoutmix.com --><style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

background:url('http://img709.imageshack.us/img709/4287/firevolvechat.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff4500;

background:#211f1d;

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">

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

<a href="javascript:showHideGB()">

[Close]

</a>

</div>

<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="firevolve" src="http://www.shoutmix.com/?firevolve" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?firevolve">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->

<script type="text/javascript">

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

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

</script></div></div><!-- End ShoutMix -->

<script type="text/javascript">

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

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

</script></div></div>

Keterangan :

Merah = tinggi tempat Shoutmix bisa di ganti sesuai selera

Jingga = Lebar tempat Shoutmix bisa di ganti sesuai selera

Hijau = Link gambar bisa di ganti juga dengan link gambar kalian

Biru Muda = Warna Border bisa di ganti sesuai keinginan

Biru Tua = Warna Background bisa di ganti sesuai keinginan

Ungu = Janda  eh salah maksudnya ID shoutmix harus di ganti dengan punya kalian sendiri ya ^_^V

Tidak begitu sulit kan ? silahkan di coba :)