Membuat Efek Bubble Pada Cursor

Kali ini saya akan share mengenai cara Membuat Efek Bubble Pada Cursor. Efek ini mirip seperti postingan saya tentang Membuat Efek Bintang Berjatuhan Dari Cursor. Tapi kali tentang gelembung, efek ini muncul ketika kita menggerakkan mouse. Bagaimana???bagus bukan. Jika ingin membuatnya bisa mengikuti tutorial di bawah ini :

1. Login blogger.
2. Rancangan >> Tambah gadget >> Html/JavaScript.
3. masukan kode di bawah ini :

&lt;noscript&gt;&lt;/noscript&gt;&lt;!-- --&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.freewebs.com/p.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quo<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

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>t;&gt;
// &lt;![CDATA[
var colours=new Array(&quot;#F781BE&quot;, &quot;#F781BE&quot;, &quot;#F781BE&quot;, &quot;#F781BE&quot;, &quot;#F781BE&quot;); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

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&lt;bubbles; i++) {
rats=createDiv(&quot;3px&quot;, &quot;3px&quot;);
rats.style.visibility=&quot;hidden&quot;;

div=createDiv(&quot;auto&quot;, &quot;auto&quot;);
rats.appendChild(div);
div=div.style;
div.top=&quot;1px&quot;;
div.left=&quot;0px&quot;;
div.bottom=&quot;1px&quot;;
div.right=&quot;0px&quot;;
div.borderLeft=&quot;1px solid &quot;+colours[3];
div.borderRight=&quot;1px solid &quot;+colours[1];

div=createDiv(&quot;auto&quot;, &quot;auto&quot;);
rats.appendChild(div);
div=div.style;
div.top=&quot;0px&quot;;
div.left=&quot;1px&quot;;
div.right=&quot;1px&quot;;
div.bottom=&quot;0px&quot;
div.borderTop=&quot;1px solid &quot;+colours[0];
div.borderBottom=&quot;1px solid &quot;+colours[2];

div=createDiv(&quot;auto&quot;, &quot;auto&quot;);
rats.appendChild(div);
div=div.style;
div.left=&quot;1px&quot;;
div.right=&quot;1px&quot;;
div.bottom=&quot;1px&quot;;
div.top=&quot;1px&quot;;
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter=&quot;alpha(opacity=50)&quot;;

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&lt;bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+&quot;px&quot;;
bubb[c].top=(bubby[c]=y)+&quot;px&quot;;
bubb[c].width=&quot;3px&quot;;
bubb[c].height=&quot;3px&quot;
bubb[c].visibility=&quot;visible&quot;;
bubbs[c]=3;
break;
}
}
for (c=0; c&lt;bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout(&quot;bubble()&quot;, 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]&gt;sdown &amp;&amp; bubbx[i]&gt;0) {
if (Math.random()&lt;bubbs[i]/shigh*2 &amp;&amp; bubbs[i]++&lt;8) {
bubb[i].width=bubbs[i]+&quot;px&quot;;
bubb[i].height=bubbs[i]+&quot;px&quot;;
}
bubb[i].top=bubby[i]+&quot;px&quot;;
bubb[i].left=bubbx[i]+&quot;px&quot;;
}
else {
bubb[i].visibility=&quot;hidden&quot;;
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 &amp;&amp; document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)==&quot;number&quot;) {
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)==&quot;number&quot;) {
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 &amp;&amp; (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(&quot;div&quot;);
div.style.position=&quot;absolute&quot;;
div.style.height=height;
div.style.width=width;
div.style.overflow=&quot;hidden&quot;;
return (div);
}
// ]]&gt;
&lt;/script&gt;

4. Simpan dan lihat hasilnya.