Tuesday, 13 March 2012

TUTORIAL: Buat slide Float untuk shoutbox

Hi There  ^ ^

Tutor kali ni macam mana cara mau buat shoutbox kamu jadi slide float.
 Maksud nya kalau tekan jaa di shotbox tu dia akan slide. Mau try ?? HEHE 
Oke, mari ikut step di bawah ni.


Step 1:
Design > Add a Gadget > HTML/Java Script

Step 2:
Kamu copy kod di bawah ni dan paste kan di ruangan tadi tu.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px
width:140p
float:left;
cursor:pointer;
background:url('GAMBAR SHOUTMIX ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
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 SHOUTMIX 
<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 = (140-gb.offsetWidth).toString() + "px";
</script>


* Merah : Letak Url gambar untuk slide float.
* Biru: Paste kod shoutmix/FBOX  kamu. 

Step 3:
Tekan SAVE !

SELAMAT MENCUBA!

No comments: