Cara Buat Animasi pada Mouse Blogger

Animasi Mouse Ato yang biasa di dunia Blogger disebut “tinkerbell-mouse”  atau juga kalo yang belum paham silahkan Gerakkan Mouse anda di Area Warna Hitam Blog ini [ khususnya ] atau dimanapun disaat masuk ke Lolids Online. Anda akan melihat Animasi yang Tampak Di layar kamu Mouse dengan disertai Animasi “Bintang” berjatuh-an seperti “hujan meteor” halllahhh… terlalu dibesar –besarnkan…. o.k langsung saja ya.

sebelumnya silahkan ambil dulu Scrips dibawah ini, buka Teks Editor seperti NotePad, Wordpad Dll. biasanya yang banyak digunakan adalah NotePad,Copy dan Paste Code Scrips yang ada di bawah ini ke NotePad yang baru dibuka tadi :

Code :

// <![CDATA[ var colour="white"; var sparkles=20; /**************************** * Tinkerbell Magic Sparkle * * (c) 2005 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]>

kalo udah dicopy paste ke Notepad / text editor lainnya, sekarang anda simpan scrips/code tadi dengan nama “AnimasiKursor.js” <tanpa tanda kutip>.

Lihat pada Huruf yang dicetak tebal diatas, itu adalah ekstension “Java Scripts” atau yang diketik seperti ini “.Js” Ekstension itu yang akan dibaca oleh di template Blogger. o.k udah cukup Pengenalannya…

setelah file tersimpan dengan exstesion Js ,contoh : mouselolidsonline.Js

Upload-lah file tersebut di website yang menyediakan Upload files secara gratis, bisa anda cari di mbah Gugel.

contoh link yang dihasilkan dari google code:

http://lol1ds.googlecode.com/files/mouselolidsonline.js

o.k sekarang kita udah dapet “Link scripts” dari hasil Upload tadi.
sekarang gunakan Code Scrips Dibawah ini untuk membuat animasinya :

code Scrips :
<script src="Alamat LINK.Js "></script>

gantilah “Alamat LINK.Js” dengan Link yang dihasilkan dari Upload tadi masih ingat kan, contohnya seperti ini :

<script src="http://lol1ds.googlecode.com/files/mouselolidsonline.js"></script>

setelah dapat Cod scripts tersebut, Copy paste Code tersebut di atas kode </head>, Caranya :

1. masuk ke account Blogger sobat dulu
2. pilih Edit HTML sebelumnya Contreng “Edit Expand Widget”
3. setelah itu tekan Ctrl-F lalu ketikkan </head> tekan Enter.
kalo engga’ ketemu code </head> biasanya terletak ditengah / menyesuaikan dengan template blogger sobat masing-masing, setelah ketemu Copy-Paste Code Scrips tadi tepat Diatas code </head> tadi.
4. Selesai dan simpan template.

Tambahan tips dan tricks yang berhubungan dengan animasi mouse ini :
Warna Bintang Mouse bisa dirubah menyesuaikan dengan Background Blogs kamu.
Caranya :
Cari Code seperti ini di Scrips mouselolidsonline.Js tadi. ( scripts asli )

// <![CDATA[
var colour="white"; /**/ <---- pakai bhs.inggris ya.
var sparkles=20;

Rubahlah Tulisan yang dicetak tebal dengan warna lain sesuka sobat blogger. setelah selesai simpanlah Code tersebut dengan NAMA FILES.Js dan UPload-lah seperti yang telah dibahas diatas tadi.dan langkah2-nya pun juga sama dengan yang diatas.


Semoga Bermanfaat sobat.


tag : animasi mouse blogger, animasi mouse, mouse, animasi, efek mouse.

Article information: Description: Cara Buat Animasi pada Mouse Blogger Rating: 4.5 - Reviewer: LolidsOfficialBlog - ItemReviewed: Cara Buat Animasi pada Mouse Blogger

Related Tips, Tricks and Tutorials :