Cara membuat Kursor Bubble atau bergelembung

Salah satu cara untuk mempercantik blog kita memang banyak caranya misalnya seperti artikel yang saya bahas sekarang ini Cara membuat Kursor Bubble atau bergelembung,untuk melihat contoh klik disini

Berikut langkah pembuatannya:

1. Masuk ke Akun Blogger Anda
2. Pilih Tata Letak

3. klik Tambah Gadget

4. HTML/Javascript

5. Copy dan pastekan kode berikut
6. <br /> <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><br /> <br /> <br >

catatan :

• Untuk mengganti warna dari bubble silahkan ganti kode yang diberi warna merah dengan kode warna yang di inginkan untuk kode warna silahkan klik disini
• Untuk mengganti jumlah bubble silahkan ganti angka yang diberi warna biru

Semoga berhasil

Suka dengan blog ini ? masukan email anda !


Delivered by FeedBurner

Baca Juga Artikel Lainnya :

• Cara Membuat judul animasi bergerak dan berwarna -warni
• Cara Membuat Banner Bergerak
• Cara Membuat Populer Pos Bergerak Dengan Animasi
• Cara Membuat Artikel Dua kolom
• Daftar situs Backlink bagi Blogger
• Cara membuat recent comment di sidebar blog
• Cara mengganti kursor blog
• cara memasang Icon yahoo ! messenger di blog
• Cara memasang widget pagerank google
• Kumpulan widget blog gratis
• Cara Mengetahui Jumlah User Online Pada Blog
• Cara memasang Twitter di Blog
• Cara memasang jam di blog
• 7 Cara ampuh Mendapatkan Backlink Berkualitas
• Cara membuat Kursor Bubble atau bergelembung
• Follower Blog Melayang
• Cara mendapatkan follower blog yang banyak
• Cara Memasang Meta Tag keyword dan deskripsi Blog