Tutorial : Rainbow Sparkle Cursor

Assalamualaikum and annyeonghaseyo. Just straight to d'point. Takde idea nak buat into. LOL. Okay. Hari ni rienna nak share kat korg cara utk buat Rainbow Sparkle Cursor. Contohnyanya macam kat bwh ni

Template Designer / Denim / Washed Denim etc

1. Dashboard > Design > Add A Gadget > HTML Javascript

Template Classic / Blogskin

1. Dashboard > Template > Edit HTML

2. Press Ctrl + f serentak dan cari code </style>

3. Copy code dekat bawah ni

<script type="text/javascript">

// <![CDATA[

var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"

var sparkles=50;

/****************************

*  Tinkerbell Magic Sparkle *

*(c)2005-11 mf2fm web-design*

*  http://www.mf2fm.com/rv  *

****************************/

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].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;

      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 && starx[i]>0) {

      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";

  tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;

    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 && tinyx[i]>0) {

      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() {

  var sw_min=999999;

  var sh_min=999999;

  if (document.documentElement && document.documentElement.clientWidth) {

    sw_min=document.documentElement.clientWidth;

    sh_min=document.documentElement.clientHeight;

  }

  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {

    if (self.innerWidth<sw_min) sw_min=self.innerWidth;

    if (self.innerHeight<sh_min) sh_min=self.innerHeight;

  }

  if (document.body.clientWidth) {

    if (document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

    if (document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

  }

  if (sw_min==999999 || sh_min==999999) {

    sw_min=800;

    sh_min=600;

  }

  swide=sw_min;

  shigh=sh_min;

}

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";

  return (div);

}

function newColour() {

  var c=new Array();

  c[0]=255;

  c[1]=Math.floor(Math.random()*256);

  c[2]=Math.floor(Math.random()*(256-c[1]/2));

  c.sort(function(){return (0.5 - Math.random());});

  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");

}

// ]]>

</script>

4. For Tempalate Designer korg paste dekat HTML Javascript. Then for Template classic paste di bawah code </style>

5. Preview & save