Monday, November 2, 2009

Tutorial : Sparkle Cursor



actually tutorial ni bersepah pun dekat mana-mana. tapi adik abby request tutorial ni. so why not i buat tutorial ni kan?
  • firstly copy code dibawah dengan cara highlight all diikuti dengan ctrl + c

<script type="text/javascript">
</script>

<script type="text/javascript">
// <![CDATA[
var colour="red";
var sparkles=100;

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="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
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);
}
// ]]>
</script>

  • pergi dashboard > layout > edit html. (bagi xml layout)
  • pergi dashboard > templates. (bagi classic templates)
  • cari <head> menggunakan ctrl + f pada keyboard.
  • paste code di atas sebelum <head>
  • save templates, view blog and lihat hasil.
red yang telah di bold boleh di tukar kepada warna lain contohnya #000000 atau #FFFFFF dan sebagainya.

22 comments:

Anonymous said...

nak bt lah.
best. best.
thank u Rara

=)

Shira said...

Haneem

buatlah buatlah =P mesti comel bila potpetpotpet.com pakai sparkle cursor!

Anonymous said...

eheee.
dah buat. dah buat.
terima kasih rara comelll

=p

admin said...

rara rajin buat tutorial. :D

Shira said...

Haneem

welcome my dear friend :)

Shira said...

Nyna

hihi. sharing is caring, but only for sometimes :DD

♥Yanie♥ said...

Yanie dh lme cari care nk buat sparkle cursor... akhirnye Kak Rara yg buat tutorial.. Thank you... Yanie dh buat dh...

pemilikcomot said...

hohoho da buat kat blog sendri da.. hohoh

Shira said...

Yanie

eh serius ke? +___________+ huu rasanya tutorial ni dah banyak tau. nasib baik yanie jumpa tutorial ni dekat blog kakrara kan. mesti lagi comel HAHAHA

Shira said...

Ara

hihi good =)

Precious said...

Owh .. thanks for d tutorial!

Unknown said...

thank oke for dis tutorial. comeyl!!

Sesopie said...

sofie wat gak!!thanx rara for the tutor!

Shira said...

Precious, Ayu Candy & Sophie

welcome korang :)

cybernetic88 said...

woo buat tutorial hee. nk wt jgk. leh?. lol. pelik kalu aku wt. hahaha

admin said...

agak pelik la kalau cybernetic88 buat. HAHA :P

Qib said...

Tengs rara, da try wat. jadik.hahaha..
comey je, u r the best!~

Anonymous said...

cantikcantik. suda lama ak mau buat ni sparkle cursor. akhirnya, dot juga. thanks kak rara.

Anis Solihin said...

thanks kak Rara..

Anonymous said...

already try it. thx ya :D

ι ℓ α α α ♥ said...

THANXX AKK :DDD

ain said...

thanks :)