Cara membuat Shout Box atau Chat box Auto Hide

Selamat pagi sahabat blogeer, pagi hari ini saya akan memosting bagamana cara membuat Shout Box atau Chat box yang bisa sembunyi otomatis atau auto hide.
Haah dari pada banyak cakap langsung aja di simak kode Java script nya.

pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

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

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

<Kode Chat Box Atau Shout Box Anda>

<br />

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

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>

</div>

</center></div>

<script type="text/javascript">

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

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

</script>

</div>

Jangan lupa kode merah adalah kode dari shout box anda sendiri, gantilah dengan kode shout box anda sendiri.
Tampilannya langsung berfungsi dan silakan bila terdapat kesulitan Comment aja langsung.

*SHARE YOUR KNOWLEDGE