Floating Massage

Assalamualaikum dan Salam 1 Malaysia . Hari ni Afiq mau buat Floating Massage . *Sorry takda Pic . :'(

 Dashboard > Design > Add a Gadget > HTML / javascript 

 Copy code di bawah .

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
down:left;
border:5px solid transperents;
background:white;
padding:10px;
-moz-border-radius-downleft:0px;
-moz-border-radius-downright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
</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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

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

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
<img src="http://img706.imageshack.us/img706/642/tutupb.png" title="DOuble Klick Tau!" alt="tutup" />
</a>
</div>
<center>


<div class='author-box'>
<img alt="avatar" class="avatar avatar-70 photo" height="70" src="http://img189.imageshack.us/img189/4873/firetoy48x48.png" width="70" /><b>   Tajuk</b><br />
Mesej korang<br />
</div>
</center>

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

NOTE : Yang tulisan warna merah tu korang boleh pilih warna background korang , tulis la warna apa apa pon dekat  tulisan merah tu , Ada sesetengah WARNA tidak boleh .

Yang warna Ungu pulak untuk TAJUK ,  tulis la apa tajuk yang korang nak .

Yang warna Biru pulak , korang tukar kepada MASSAGE apa yang korang nak .

 Save dan lihat hasilnya .

---

Thank you for reading :*

---