Trick to add falling star effect on mouse movement in blogger

Do you wanna make your blog feel more animated? So how about adding falling star effect on your own blog. You can do this by just making some changes in Java script. Add a few lines and see the effect.

For doing this follow the tutorial below:

1. First login to your bloggers a/c.
2. Now go to Design->Template-> edit HTML.
3. Now start Find using CTRL+F, and search for </head> tag.
4. Now paste the code given below right above the tag and press save template.
   

   <script type=’text/javascript’>
   // <![CDATA[
   var colour="black";
   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>

You can edit the above script by just changing the Figures in red color. So just add this script and see the effect.