Trick Modifikasi Friendster: Animasi cursor friendster dgn gelembung FriendsterMod Tips Trik modifikasi Friendster layout. Tutorial mudah dan sederhana percantik tampilan skin friendster. Free layout, skins, themes, template for friendster profile.

Tutorial Lainnya

CSS Sembunyikan layout friendster bagian 2
Layout Friendster content box bergerak semua
Indo direct Link file hosting
CSS sembunyikan layout friendster bagian pertama
CSS dalam Java script extension untuk layout frien...
Buat Entry Page untuk profile Friendster dengan re...
File hosting buat JS dan CSS friendster kamu
Pasang Slide show di Friendster Top navigasi banner
Pasang ShoutBox di Friendster
Icon di bawah control panel kolom (Friendster)

Arsip Simpanan

Advertisements

Pencarian Cepat

Langganan

Blog Stats

Lihat Hits

Credits

FriendsterMod team 2007
Semua isi blog ini berlicensi Creative Common. Gunakan dengan resiko sendiri, oke. FriendsterMod Team are saying thanks to all Friendsterholic (including you) for reading this Friendster stuff blog. Jangan sungkan untuk bookmark kita di digg delicious technorati atau submit langganan feed kami di google yahoo aol.

Met Datang di FriendsterMod - Friendster Layout ??

Welcome to Friendstermod. place where you can find Free Friendster Layout, skin, themes, you can download that layout for free and use it at your friendster profile. Layouts are well designed and optimized under friendster CSS code. Download free skins or request your own friendster layout themes.

Subscribe with Friendstermod (New)

Tuesday, October 2, 2007

Animasi cursor friendster dgn gelembung

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 :

<!-- 
n4=(document.layers);
n6=(document.getElementById&&!document.all);
ie=(document.all);
o6=(navigator.appName.indexOf("Opera") != -1)?true:false;

img0=new Image();
img0.src="http://url-ke-gelembung.mu/gelembung.gif";

num=(n6)?10:15;

y=0;
x=0;
if (n4||n6){
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){
 function mouse2(){
 y = (ie)?event.clientY-20:event.clientY-20-window.pageYOffset;
 x = event.clientX-4;
 } 
document.onmousemove=mouse2;
}
yp=new Array();
xp=new Array();
sp=new Array();
rt=new Array();
gr=new Array();
s1=new Array();
s2=new Array();
nz=new Array();
wh=(ie)?window.document.body.clientHeight:window.innerHeight;
for (i=0; i < num; 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){
 for (i=0; i < num; 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]+"></LAYER>");
 }
}
if (ie){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 for (i=0; i < num; i++){
 document.write('<img id="bub'+i+'" src="'+img0.src+'" style="position:absolute;top:-50px;left:0px">');
 }
 document.write('</div></div>');
}
if (n6||o6){
 for (i=0; i < num; i++){
 document.write("<div id='bub"+i+"' style='position:absolute;top:-50px;left:0px'>"
+"<img src="+img0.src+" width="+nz[i]+" height="+nz[i]+"></div>");
 }
}
function MouseBubbles(){
scy=(document.all)?document.body.scrollTop:window.pageYOffset;
scx=(document.all)?document.body.scrollLeft:window.pageXOffset;
for (i=0; i < num; 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;
}
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]; 
}
if (n6||o6){
 document.getElementById("bub"+i).style.left=xp[i]+scx;
 document.getElementById("bub"+i).style.top=yp[i]+scy;
}
gr[i]+=rt[i]; 
s1[i]+=s2[i];
if (gr[i] > 14) gr[i]=15;
}
setTimeout('MouseBubbles()',10);
}
MouseBubbles();
//-->

(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.

Ditulis oleh FriensterMod Team @ 2:47 PM.

Cool Stuff buat reader Friendstermod

Perhatian, Tim FriendsterMod tidak memiliki hubungan khusus apapun dengan pihak Friendster begitupun sebaliknya. Blog ini sebagai media informasi yang menyampaikan tentang tips trik yang bisa dilakukan untuk merubah tampilan profil friendster dari yang sederhana hingga yang intermediate. Kami juga tidak bertanggung jawab atas kemungkinan apapun yang timbul akibat penggunaan isi artikel dalam blog ini. Gunakan dan praktekkan dengan kesadaran dan tanggung jawab penuh pada diri kamu sendiri.

FriendsterMod new skin beta. Best viewed at 1024x768 pixel.