Subtle Bubble Animation 4 Blog Cursor (Tutorial)

Has anyone wondered about the little bubbles that bubbles upward whenever the cursor moves?
Has anyone wondered if it's part of the cursor?
Has anyone wondered how to get it?
Has anyone wondered if there is a need to delve into pages of the codes for the template to write a few lines of bubble codes?

Okay, okay. Don't wonder anymore. The answer is, no, it's not a part of the original cursor, and no, you don't need to sink your teeth into a hellish mountain of codes to apply this subtle, cute bubble animation that works on almost all browsers.

If you love bubbles, and if you are mad at Chrome and Firefox for not displaying animation that comes with your cursor, then this is for you.
It's yet again another easy thing to add to your blog. Here's how to do it:

Step 1: Copy all the codes in this pink box.

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#FF9CE9", "#FF9CE9", "#FF9CE9", "#FF9CE9", "#FF9CE9"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen /**************************** * JavaScript Bubble Cursor * * (c) 2010 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 bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; 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; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } // ]]> </script>

Step 2: Go to Blogger > Layout, then click Add A Gadget at the bottom (footer).
(Do not use the sidebar because later on you might have a lot of sidebar codes that will appear in your blog's sidebar, and the bubble code will just confuse everything up. Use the footer, where there is not much to design on compared to the sidebar where you'll have lots of gadgets, html codes etc)

Step 3: Choose HTML/Javascript gadget, and click + to open it.

Step 4: Paste the bubble code into the content box, while leaving the title box empty so that an empty space with a title doesn't appear at the footer later.

Step 5: This step is optional.

How to change the colour of bubbles: The bubble code I gave you is in pink colour. If you want to change the colour of the bubbles, here's what to do: Scroll up to the code above. Note the GREEN part at the beginning? That's the colour html code. Change the colour of the bubbles by changing all of the code there, but be careful not to delete a ";", or a "," and so on. How to know what code does your favourite colour have?
Go HERE to get the code for your colour, and replace my pink code with your own, all five of them.

How to change the number of bubbles: The bubble code I gave you will release 100 bubbles at a time. If you want to change the number of bubbles, say like to 150, scroll up to the code above, find the BLUE part at the beginning, and replace with your own number of bubbles.

Step 6: Save the gadget. Then save the arrangement by clicking the top right orange button in Layout. Your bubble animation is done! View it in your blog. =)

That's it for now :) Cheers!