Memasang Animasi Cursor di Pages Friendster

Pengen tampilan Friendster layout kamu terlihat lebih cantik dan menarik? Selain kamu

mengoptimalkandesign layout profile friendster kamu dengan menggunakan CSS external

file, kamu juga butuh sedikit otak-atik animasi dengan menggunakan Javascript (js extension).

Tutorial berikut ini akan memberikan implementasi penggunaan js extension (Java script)

pada profile friendstermu agar layout cantikmu itu semakin menarik untuk dilihat.

Untuk itu kita akan gunakan sedikit sentuhan animasi gelembung-gelembung udara yang

muncul dari ujung cursor kamu. Cursor adalah penunjuk di monitor yang bergerak-gerak

setiap kamu mengarahkan mouse.Untuk langkah awal buka Notepad kamu (atau text editor lain)

kemudian copy-paste-kan kode berikut ini dan “Save as” menjadi java script dengan

menambahkan akhiran js extension dibelakan file (contoh; gelembung.js).

Caranya: File -> Save As(Save as type pilih all files) – Save.

<!–

n4=(document.layers);<br
/>n6=(document.getElementById&&!document.all);<br
/>ie=(document.all);<br
/>o6=(navigator.appName.indexOf(“Opera”) != -1)?true:false;<br
/>
img0=new Image();<br
/>img0.src=”http://url-ke-gelembung.mu/gelembung.gif”;<br
/>
num=(n6)?10:15;

y=0;<br
/>x=0;
if (n4||n6){<br
/>window.captureEvents(Event.MOUSEMOVE);
function
mouse1(e){
y = e.pageY-20-window.pageYOffset;
x
= e.pageX-4;
}
if (n4)
window.onMouseMove=mouse1;
else
document.onmousemove=mouse1;
}
if (ie||o6){<br
/> function mouse2(){
y =
(ie)?event.clientY-20:event.clientY-20-window.pageYOffset;

x = event.clientX-4;
} <br
/>document.onmousemove=mouse2;
}
yp=new
Array();
xp=new Array();
sp=new Array();<br
/>rt=new Array();
gr=new Array();
s1=new
Array();
s2=new Array();
nz=new Array();<br
/>wh=(ie)?window.document.body.clientHeight:window.innerHeight;<br
/>for (i=0; i
yp[i]=Math.random()*wh-y;
xp[i]=x;
sp[i]=
6+Math.random()*3;
s1[i]=0;

s2[i]=Math.random()*0.1+0.05;
gr[i]=4;

nz[i]=Math.random()*15+5;

rt[i]=Math.random()*0.5+0.1;
}
if (n4){<br
/> for (i=0; i document.write(“<layer
NAME=’bub”+i+”‘ LEFT=0 TOP=-50>”
+”<img
src=’http://url-ke-gelembung.mu/gelembung.gif’ width=”+nz[i]+”
height=”+nz[i]+”>”);
}
}<br
/>if (ie){
document.write(‘<div
style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i i++){
document.write(‘src=”‘+img0.src+’”
style=”position:absolute;top:-50px;left:0px”>’);
}<br
/> document.write(‘

‘);
}<br
/>if (n6||o6){
for (i=0; i
document.write(“

style=’position:absolute;top:-50px;left:0px’>”
+”<img
src=”+img0.src+” width=”+nz[i]+”
height=”+nz[i]+”>

“);
}
}<br
/>function MouseBubbles(){<br
/>scy=(document.all)?document.body.scrollTop:window.pageYOffset;<br
/>scx=(document.all)?document.body.scrollLeft:window.pageXOffset;<br
/>for (i=0; i sy =
sp[i]*Math.sin(270*Math.PI/180);
sx =
sp[i]*Math.cos(s1[i]*5);
yp[i]+=sy;
xp[i]+=sx;

if (yp[i] < -40){
yp[i]=y;

xp[i]=x;
sp[i]= 6+Math.random()*3;

gr[i]=4;
nz[i]=Math.random()*15+5;
}<br
/>if (n4){

document.layers["bub"+i].left=xp[i]+scx;

document.layers["bub"+i].top=yp[i]+scy;
}
if
(ie){

document.getElementById(“bub”+i).style.left=xp[i]+scx;

document.getElementById(“bub”+i).style.top=yp[i]+scy;

document.getElementById(“bub”+i).style.width=gr[i];

document.getElementById(“bub”+i).style.height=gr[i]; <br
/>}
if (n6||o6){

document.getElementById(“bub”+i).style.left=xp[i]+scx;

document.getElementById(“bub”+i).style.top=yp[i]+scy;<br
/>}
gr[i]+=rt[i];
s1[i]+=s2[i];
if
(gr[i] > 14) gr[i]=15;
}<br
/>setTimeout(‘MouseBubbles()’,10);
}<br
/>MouseBubbles();
//–>

Untuk lebih jelasny, baca dulu post ini sampai selesai. Setelah kode di atas kamu save menjadi js extension lalu silahkan kamu upload ke file hosting yang support direct hot link kesayanganmu (bisa Ripway, Dompetfoto, Hotlinkfiles, dll) lalu dapatkan kode url link ke file tersebut (contoh: http://h1.ripway.com/Yeyen/gelembung.js). Nah langkah terakhir kamu tinggal memasukkan url js extension mu tsb ke Friendster menggunakan JS Linker.

 

Advertisement