// ZieyraSulley
TUTORIAL ANIMATED FLOATING SOCIAL WEB

21.4.11 | 3 comment(s)


hahhaha, amek kau, panjang ha tajok,, tutorial direquest leh aina, tapi die tak de backlink plak baru ingat nak menempel kan diri

>

korang pegiDESIGN > EDIT HTML
jangan lupe tick kat expand widget template

then ctrl + f code nih

</head>

dah? copy ctrl + c and ctrl + v code nih plah kat bawah code yang kite carik tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript'>
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){
menuYloc =
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css (&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
$(name).animate({top:offset},{duration:1000,queue:false});
});
});
</script>

yang tulisan color biru tuh korang boleh ubah,
tuh untuk brape cepat korang punye icon tuh begerak
lagi benyak nombo, lagi cepat die gerak

lepastuh ctrl + f code nih plak
]]></b:skin>

dah? ctrl + c and ctrl + v code nih kat atas code yang kite carik tadi
#floatMenu {
position:absolute;
top:150px;
float:left;
width:45px;}
#floatMenu ul {
list-style: none;}
#floatMenu ul li a {
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;}
#floatMenu ul li a:hover {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
opacity: 1;}

lepastuh ctrl + f code nih pulak
</body>

dah? ctrl + c and ctrl + v code nih kat atas code yang kite carik tadi
<div id='floatMenu'>
<ul>
<li><a href='LINK FACEBOOK KORANG' rel='nofollow' target='_blank'><img border='0' src='http://lh3.ggpht.com/_-kiN_mt1trA/TRGYfxUq9LI/AAAAAAAAACs/tzNEyscBX_I/btn_f.png' style='margin-bottom: 3px;' title='Follow Me On Facebook'/></a></li>
<li><a href='LINK TWITTER KORANG' rel='nofollow' target='_blank'><img border='0' src='http://lh5.ggpht.com/_-kiN_mt1trA/TRGYf-CYBHI/AAAAAAAAACw/tuuYnz20Lx0/btn_t.png' style='margin-bottom: 3px;' title='Follow Me On Twitter'/></a></li>
</ul>
</div>

kalau korang nak tambah icon just tambah
<li><a href='LINK KORANG' rel='nofollow' target='_blank'><img border='0' src='LINK ICON KORANG' style='margin-bottom: 3px;' title='Follow Me On SOCIAL WEB KORANG'/></a></li>
sebelum code
</ul>
</div>


dah ciaap...huuh,, panjang pulak tutorial kali nih laah

dah buat boleh lah komen :)

Labels: , ,



Newer | Older
Disclaimer

Hi peeps. It's Zheyrr fer short. An Omnomnomnivour!
Before anything else please follow these rules : No ripping, spamming, and any type of childish acts. Respect is a must. I have disabled right click and dragging, please use ctrl+c. Enjoy


Navigations!

FOLLOW | DASHBOARD

Diary About Stuff Site


Let's Talk!

++ Your IP ADRESS is:
++  baby(s)


Credits!

Template by : Farisyaa Awayy
Basecode by : Nurynn
Full Edited : Zieyra Sulley