Tutorial : Shoutbox terapung kat tepi belog

Harini nak buat tutorial sikitlah..
Saudari Ummie yang minta tutorial ni..
Memandangkan Lin belum pernah lagi buat tutorial ni..
Maka dengan resminye Lin akan tunjukkan yerr..

First skali korang masuk dalam dashboard korang..
Pastu add widget pilih HTML..
Pastu pastekan yang kat bawah ni..

<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/AVvXsEh0p8JUFSEtZuHQ5agGHoQ_ci2AV64AL3rNsNPa8xZCVjQc3kzs_R5QpbLbeTSUga1QW3ttGrHfbibLrB8wbzKgPo9GhllX50-yXq7TQF4rtM7C_FtpkN9q0df4piQZBZJLv2GgmZTlN_7O/s320/tabs.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #666666;

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

<Ganti Dengan Code Chatbox Korang>

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

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

Tadaaa~..


Dah siap..
Semoga berjaya..!!

P/S : Kalau ade sebarang error bagitawu yer..Jangan lupe kelik nuff Lin yerr..^_^