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

5 comments:

Nur Syafiqah bt Zulkifly Bin Mohamad said...

thanks ! berjaya ! tapi kan , ada yg tak kena. hehe tapi takpe ! ;D

scha vella said...

@Nur SyafiQaH ZulkiflYwelcome dear.. apa yg xkena ye?? ;D

Syazwani Khirizan said...

Thanks for this Tuto ! Saya sukaa <3 (;

Syazwani Khirizan said...

Btw , boleh saya tanya sikit . Kenapa ehh icon utk follow tu jadi lebar ? And cemana nak normalkan dia balik ? xD

scha vella said...

@Nur Syazwani Khirizan dye jadi lebar coz height ngn weight dye x sama.. masa upload dkt photobucket cube tgk dye punya height ngan weight pastu salin dkt notepad.