Tutorial : Floating shoutboxx

 

salam.Hari ni nak wat tuto.Code ni aku amek dari blog Hanna.Blog dy kan dah close, so aku amek code dy, saya credit awak taw Hanna.Korang taw tak floating shoutbox tu apee? Buka blog > ini <.Yang gambar Eunhyuk tuh lahh..

so nak kee? 

Log in | Design | Add a Gadget | HTML/JAVASRIPT

paste kan code dibawah 

<style type="text/css">

#gb{
position:fixed;
top:45px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:180px;
float:left;
cursor:pointer;
background:url('URL ICON') 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, 150-w) : moveGB(170-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">

CODE SHOUTBOX

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>

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

okeyh then save !
URL ICON : korang bolehlah buat sendiri or take one from me > here <
CODE SHOUTBOX : bolehlah signup or kalau tak reti, study kat > sini <

credit : Hanna