Membuat Floating Widget

Log in >> Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/Java Script
Copas code berikut:

<style type="text/css"> #gb{ position:fixed; top:20px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat; } .gbcontent{ float:left; border:2px solid #FFFFFF; background:#F367F5; padding:5px; } </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"> Letakkan kode Shoutmix anda disini <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

NB:
Kode berwarna Merah merupakan ukuran lebar dan tinggi. Ganti sesuai keinginan anda.
Kode berwarna Hijau merupakan merupakan kode warna background. Ganti sesuai keinginan anda.
Kode berwarna Kuning merupakan tempat untuk menaruh kode nya.