Creating Bubble Effect on Cursor

Creating Bubble Effect on Cursor - Bismillah. This time I will try to share a beautiful script that gives effect to the blog friends, which gives the effect of bubbles on your blog cursor.

In this case, I will introduce an effect that was not foreign to that already experienced in the look of her blog. If the habit of friends presented a falling snow effect following the blog cursor, then the time is not much different, except that this time the snow comes out to be replaced with bubbles coming out when the cursor is moved on the display blog.

This bubble cursor effects I got from one of my favorite blogs, DTE blog. That was one of my teachers in the field of blogs in cyberspace.

Either directly just to make the bubble effect on your blog cursor, not hard, just by following a few steps, you will easily result in a pretty bubble cursor effect on your blog.

The steps are as follows:

1. Make sure you are being logged on your blog and have chosen your blog you will give the effect of bubbles on the cursor.
2. Click on the menu layout
3. Click the plus widget
4. Copy the javascript code below, then paste the code javasript form, and leave blank the section title.

   <script type="text/javascript">
   var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
   var bubbles=100; // jumlah maksmal gelembung
   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>

5. and finally click save.

Look at the look of your blog now, you will see a beautiful effect on your blog cursor.

The script above you can also put on the head cover (</head>).

So this tutorial, please experiment. Alhamdulillah.