Pages

Ads 468x60px

Minggu, 04 Oktober 2009

Membuat animasi kata atau nama blog sebagai cursor

He...he...! Mungkin agak unik dan cukup menarik untuk menjadikan animasi nama blog, nama diri, nama idola, anak, binatang kesayangan dan terlebih...,nama kekasih tercinta menjadi sebuah cursor yang setiap hari kita sentuh, kita lihat dan selalu mendampingi saat ngeblog. Cursor dalam bentuk kata ini dibuat menggunakan javascript. Silahkan nanti dicopy dan pasang di blog kamu. O..., ya, untuk nama yang yang akan dituliskan sebagai cursor dan warna bisa anda ganti sesuai dengaan keinginan. Apabila lebih telaten ukuran dan variasi lainya juga bisa di rubah.

Cara membuat animasi kata menjadi sebuah cursor :

1. Login ke blogger
2. Masuk ke menu TATA LETAK
3. KLIK "ELEMEN LAMAN".
4. KLIK lagi di HTML/Javascript.
5. Langsung coba dulu kode dalam scrholl bar dengan copy paste dalam ruang HTML.
6. KLIK Simpan/Save.
7. Lihat hasilnya dengan membuka blog di browser yang lain. Bila editing dilakukan di IE, lihat hasilnya di Opera atau Firefox


<script language="JavaScript1.2">
<!--

/*edit by harry roy
Shannenpio Demo
bloggerstuars.blogspot
*/

var message='Shannenpio Demo';
var messagecolor='#f6ff01'

//Enter number of seconds for message to display (0=perpetual)

var dismissafter=0
///no need to edit below/////////

var amount=5,ypos=0,xpos=0,Ay=0,Ax=0,By=0,Bx=0,Cy=0,Cx=0,Dy=0,Dx=0,Ey=0,Ex=0;

if (document.layers){

for (i = 0; i < amount; i++)

{document.write('<layer name=ns'+i+' top=0 left=0><font face="Courier New" size=3 color='+messagecolor+'>'+message+'</font></layer>')}

window.captureEvents(Event.MOUSEMOVE);

function nsmouse(evnt){xpos = evnt.pageX;ypos = evnt.pageY;makefollow()}

}

else if (document.all){

document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");

document.write("<div id='inner' style='position:relative'>");

for (i = 0; i < amount; i++)

{document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;font-family:Courier New;font-size:16px;color:'+messagecolor+'">'+message+'</div>')}

document.write("</div>");

document.write("</div>");

function iemouse(){ypos = document.body.scrollTop + event.y;xpos = document.body.scrollLeft + event.x;makefollow()}

}

function makefollow(){

if (document.layers){

document.layers["ns0"].top=ay;document.layers["ns0"].left=ax;

document.layers["ns1"].top=by;document.layers["ns1"].left=bx;

document.layers["ns2"].top=cy;document.layers["ns2"].left=cx;

document.layers["ns3"].top=Dy;document.layers["ns3"].left=Dx;

document.layers["ns4"].top=Ey;document.layers["ns4"].left=Ex;

}

else if (document.all){

outer.all.inner.all[0].style.pixelTop=ay;outer.all.inner.all[0].style.pixelLeft=ax;

outer.all.inner.all[1].style.pixelTop=by;outer.all.inner.all[1].style.pixelLeft=bx;

outer.all.inner.all[2].style.pixelTop=cy;outer.all.inner.all[2].style.pixelLeft=cx;

outer.all.inner.all[3].style.pixelTop=Dy;outer.all.inner.all[3].style.pixelLeft=Dx;

outer.all.inner.all[4].style.pixelTop=Ey;outer.all.inner.all[4].style.pixelLeft=Ex;

}

}

function move(){

if (dismissafter!=0)

setTimeout("hidetrail()",dismissafter*1000)


if (document.layers){window.onMouseMove = nsmouse}

else if (document.all){window.document.onmousemove = iemouse}

ey = Math.round(Ey+=((ypos+20)-Ey)*2/2);ex = Math.round(Ex+=((xpos+20)-Ex)*2/2);

dy = Math.round(Dy+=(ey - Dy)*2/4);dx = Math.round(Dx+=(ex - Dx)*2/4);

cy = Math.round(Cy+=(dy - Cy)*2/6);cx = Math.round(Cx+=(dx - Cx)*2/6);

by = Math.round(By+=(cy - By)*2/8);bx = Math.round(Bx+=(cx - Bx)*2/8);

ay = Math.round(Ay+= (by - Ay)*2/10);ax = Math.round(Ax+= (bx - Ax)*2/10);

makefollow();

jumpstart=setTimeout('move()',10);

}
function hidetrail(){

if (document.all){

for (i2=0;i2<amount;i2++){

outer.all.inner.all[i2].style.visibility="hidden"

clearTimeout(jumpstart)

}

}

else if (document.layers){

for (i2=0;i2<amount;i2++){

temp="ns"+i2

document.layers[temp].visibility="hide"

clearTimeout(jumpstart)

}

}

}
window.onload=move;

//-->

</script>











8. Bila belum muncul kata "Shannenpio Demo berwarna kuning" yang mengikuti cursor, coba restart sekali lagi blog yang digunakan untuk melihat hasilnya (blog yang dibuka di browser yang berbeda tadi).

9. Setelah berhasil dengan munculnya nama Shannenpio Demo yang selalu mengikuti cursor), silahkan nama tersebut bisa anda ganti dengan nama yang menjadi pilihan kamu. Akan lebih oke lagi bila yang dituliskan nama kekasih kamu. Bayangkan kamu sebagai cursornya dan kekasihmu selalu mengikuti kemanapun kamu pergi. Ke WC sekalipun. He...he...Entar malah nggak jadi EkOk...!!!!

10. Untuk mengganti kata "Shannenpio Demo dengan warna kuning", silahkan ubah kode yang berwarna kuning. Sebelah atas untuk nama dan sebelah bawah kode warnanya.

11. Beberapa kode bisa dirubah untuk memberi tampilan yang berbeda bila kamu mau.

Selamat mencoba. Semoga berhasil!!!

0 komentar:

Posting Komentar