Animasi Friendster

Ingin agar tampilan Friendster layout kamu terlihat lebih keren dan menarik? Selain kamu mengoptimalkan design layout profile friendster kamu dengan menggunakan CSS, kamu juga butuh sedikit sentuhan animasi dengan menggunakan Javascript (js extension). Tutorial berikut ini akan memberikan implementasi penggunaan js extension (Java script) pada profile friendster agar layout cantikmu semakin keren.




Kita akan menggunakan animasi gelembung (buble cursor) pada cursor kamu. Kebanyakan para friendsterholic hanya merubah tampilan cursor standart berupa anak panah menjadi tangan yang sedang menunjuk. Padahal itu juga sebenarnya standar windows loh jika cursor menyentuh link maka anak panah tersebut akan berubah jadi tangan penunjuk. Jadi kekurangan dari penggunaan cursor bentuk tangan penunjuk ini pada profil friendster adalah akan membingungkan orang lain yang membuka friendstermu. Orang lain yang melihat akan bingung membedakan link aktif atau tidak.




Untuk itu sekarang kita akan gunakan animasi gelembung-gelembung udara yang muncul dari ujung cursor kamu. Apa itu cursor? kalo dari tdai kamu belum tau juga apa itu cursor maka keterlaluan deh. Cursor itu gampangannya adalah penunjuk di monitor yang bergerak-gerak setiap kamu mengarahkan mouse.



Seperti biasa 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). Mengenai cara bagaimana cara nge-save dan penggunaan JS extension silahkan lihat kembali posting sebelumnya tentang penggunaan java script di friendster.

Code :
<!-- <br />n4=(document.layers);<br />n6=(document.getElementById&&!document.all);<br />ie=(document.all);<br />o6=(navigator.appName.indexOf("Opera") != -1)?true:false;<br /><br />img0=new Image();<br />img0.src="http://url-ke-gelembung.mu/gelembung.gif";<br /><br />num=(n6)?10:15;<br /><br />y=0;<br />x=0;<br />if (n4||n6){<br />window.captureEvents(Event.MOUSEMOVE);<br />function mouse1(e){<br /> y = e.pageY-20-window.pageYOffset;<br /> x = e.pageX-4;<br /> } <br />if (n4) window.onMouseMove=mouse1;<br />else document.onmousemove=mouse1;<br />}<br />if (ie||o6){<br /> function mouse2(){<br /> y = (ie)?event.clientY-20:event.clientY-20-window.pageYOffset;<br /> x = event.clientX-4;<br /> } <br />document.onmousemove=mouse2;<br />}<br />yp=new Array();<br />xp=new Array();<br />sp=new Array();<br />rt=new Array();<br />gr=new Array();<br />s1=new Array();<br />s2=new Array();<br />nz=new Array();<br />wh=(ie)?window.document.body.clientHeight:window.innerHeight;<br />for (i=0; i < num; i++){ <br /> yp[i]=Math.random()*wh-y;<br /> xp[i]=x;<br /> sp[i]= 6+Math.random()*3;<br /> s1[i]=0;<br /> s2[i]=Math.random()*0.1+0.05;<br /> gr[i]=4;<br /> nz[i]=Math.random()*15+5;<br /> rt[i]=Math.random()*0.5+0.1;<br />}<br />if (n4){<br /> for (i=0; i < num; i++){<br /> document.write("<LAYER NAME='bub"+i+"' LEFT=0 TOP=-50>"<br />+"<img src='http://url-ke-gelembung.mu/gelembung.gif' width="+nz[i]+" height="+nz[i]+"></LAYER>");<br /> }<br />}<br />if (ie){<br />document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');<br /> for (i=0; i < num; i++){<br /> document.write('<img id="bub'+i+'" src="'+img0.src+'" style="position:absolute;top:-50px;left:0px">');<br /> }<br /> document.write('</div></div>');<br />}<br />if (n6||o6){<br /> for (i=0; i < num; i++){<br /> document.write("<div id='bub"+i+"' style='position:absolute;top:-50px;left:0px'>"<br />+"<img src="+img0.src+" width="+nz[i]+" height="+nz[i]+"></div>");<br /> }<br />}<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 < num; i++){<br />sy = sp[i]*Math.sin(270*Math.PI/180);<br />sx = sp[i]*Math.cos(s1[i]*5);<br />yp[i]+=sy;<br />xp[i]+=sx; <br />if (yp[i] < -40){<br /> yp[i]=y;<br /> xp[i]=x;<br /> sp[i]= 6+Math.random()*3;<br /> gr[i]=4;<br /> nz[i]=Math.random()*15+5;<br />}<br />if (n4){<br /> document.layers["bub"+i].left=xp[i]+scx;<br /> document.layers["bub"+i].top=yp[i]+scy;<br />}<br />if (ie){<br /> document.getElementById("bub"+i).style.left=xp[i]+scx;<br /> document.getElementById("bub"+i).style.top=yp[i]+scy;<br /> document.getElementById("bub"+i).style.width=gr[i];<br /> document.getElementById("bub"+i).style.height=gr[i]; <br />}<br />if (n6||o6){<br /> document.getElementById("bub"+i).style.left=xp[i]+scx;<br /> document.getElementById("bub"+i).style.top=yp[i]+scy;<br />}<br />gr[i]+=rt[i]; <br />s1[i]+=s2[i];<br />if (gr[i] > 14) gr[i]=15;<br />}<br />setTimeout('MouseBubbles()',10);<br />}<br />MouseBubbles();<br />//--><br />

(kode di atas belum sempurna, baca dulu post ini sampai habis). 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://dompetfoto.org/files/13/gelembung.js). Nah langkah terakhir kamu tinggal memasukkan url js extension mu tsb ke Friendster (nah lu baca lagi deh tentang cara ini di posting sebelumnya).




Jika ingin mengganti gambar gelembung tersebut dengan gambar lain misalnya fotomu, atau emoticon, smiley, dll.. usahakan ukuran dan dimensi gambar tersebut tidak terlalu besar agar profile friendsterkamu tidak terlalu berat ketika di load di browser. Kalo temanmu yang buka koneksi internetnya kenceng sih gak masalah. Tapi kalo bukanya dari warnet..ya modar deh tuh. Makanya usahakn agar dimensinya dibawah 100x100 px. Cara gantinya cukup kamu upload dulu gambar tersebut di image hosting (imageshack, dompetfoto, tinypic,dll) dapatkan url link-nya lalu buka file gelembung.js tadi lalu cari dan ganti tulisan 'http://url-ke-gelembung.mu/gelembung.gif' yang muncul dua kali di js tersebut, ganti dengan url gambar kamu. simple khan..?



Liat screenshoot berikut:



Nah kalau kamu ingin langsung pakai dan gak perlu lagi edit kode di atas silahkan saja download file js extension nya berikut ini sesuai dengan gambar gelembung yang ingin kamu pakai di layout friendstermu.



http://dompetfoto.org/files/13/gelembung_01.js

http://dompetfoto.org/files/13/gelembung_02.js

http://dompetfoto.org/files/13/gelembung_03.js



download dan masukkan saja js extension di atas ke dalam friendster kamu..selamat menikmati.