Cara Membuat Chatbox Melayang

Cara membuat shoutbox sebenarnya sih gampang..Tinggal ikutin langkah-langkah dibawah.

Oke langsung mulai aja deh.. ^_^

1. log in ke blogger

2. pilih menu tata letak

3. edit HTML shoutbox anda (jangan lupa back up dulu scriptnya)

4. hapus script original shoutbox anda. lalu ganti dengan 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("ganti dengan url gambarmu") 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">

<!– disini letak kode atau script shoutmix !–>

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

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe scrolling="auto" width="198" frameborder="0" src="http://www6.shoutmix.com/?junkcool" height="400" title="junkcool">

<a href="http://www6.shoutmix.com/?junkcool">View shoutbox</a>

</iframe>

<!-- End ShoutMix -->

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

[close]

</a>

</div>

</!–></div>

</div>

<script type="text/javascript">

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

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

</script>

Sekian, Mudah kan ^ ^