tutorial slide button follower

dulu pqah ada ajar korang nak buat slide shoutbox kan, so hari nie pqah nak ajar korang buat slide  button follower mcm pqah punya nie tuto nie direquest ikazulfa yg cantik manis

klik gmbar tuk tumbesaran =D

mula2 pqah ajar korang buat button dia dulu ek..

1)design> edit html/javascript

 2)copy code dkt bwh nie..

 <style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;F
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>
    <div style='display:scroll; position:fixed; top:220px;left:-0px;'>
    <a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="120" height="150"src="url untuk button" alt="PUSH" title="Follow"/></a>
    </div>

warna merah tu  korang bleh ubah dia punya top:220 jadi bottom:200.....left:-0 jadi right:2 ke ikut suka korang pandai la korang adjust ye

warna purple tu pulak ketinggian url icon yg korang edit tu pasti width ngn height dia tu betul2 kalau korang x nk gambar yg korang edit tu mengembang drpd keadaan asal dia

warna hijau lak utk url button comel yg korang edit ye syg=D upload dekat photobucket pastu adjust dia punya WIDTH/HEIGHT DAN PASTI KAN TEPAT

3)korang boleh save 

yg nie cara2 nk buat kotak follower tu pulak sebelum tu korang kena pegi sini dulu google friend connect pstu dah pegi korang boleh buat code dia mcm nie

1)design> edit html/javascript

2)copy code dibawah nie

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:3px solid #FE9A2E;
background:url(url background ) #FE9A2E repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

CODE GENERATE FOLLOWERS GADGET

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

warna purple warna utk border slide follower korang

warna kuning utk background comei 

warna merah tu utk code yg korang dah generate dkt google friend connect tadi

3) save 

credit: apit comei