Membuat Efek kursor Gelembung Berwarna

Hai sahabat blogger, nih ada sesuatu yang menarik kali ini kita akan bahas yaitu menambahkan efek gelembung pada sebuah kursor yang dapat mempercantik tampilan blog kita maka dari itu bahasan kali ini kita akan memberi judul  Membuat Efek kursor Gelembung Berwarna  dan caranya pun sangat mudah sekali untuk di pelajari dan di ikuti oleh para blogger semuanya, kalau tidak percaya mari kita buktikan dan langsung ke langkah-langkahnya ;
1. Login ke Blogger.com
2. Klik Rancangan

3. Di Elemen Laman klik Tambah Gadget

4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +

5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript Dengan Gambar  

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">


// <![CDATA[
var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // 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>



6. Simpan dan lihat tampilannya.

Selamat mencoba dan semoga berhasil.
Terima kasih telah berkunjung ke blog Masih Ingin Belajar.

Keywords: Membuat Efek kursor Gelembung Berwarna, Cara Membuat Efek kursor Gelembung Berwarna, membuat efek kursor, membuat efek cursor, cursor, kursor, membuat efek gelembung pada cursor, membuat efek gelembung pada kursor, cara membuat efek kursor, cara membuat efek cursor, cara membuat efek gelembung pada cursor, cara membuat efek gelembung pada kursor, langkah-langkah membuat efek kursor, langkah-langkah membuat efek cursor, langkah-langkah membuat efek gelembung pada cursor, langkah-langkah membuat efek gelembung pada kursor, menambahkan efek gelembung pada cursor, cara menambahkan efek gelembung pada cursor, langkah-langkah menambahkan efek gelembung pada cursor, blog, blogger tutorial, tutorial blogger, panduan blogger, belajar blogger, tutorial blog, panduan blog, belajar blog, tips dan trik Blogger, tips blog, tips blogger, trik blog, trik blogger, trick blog, trick blogger, cara membuat, membuat, cara membuat, masih ingin belajar.