Membuat Efek Cursor Gelembung

Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini blog trik dan tips akan membahas bagaimana cara membuat efek gelembung pada cursor. Efek gelembung akan muncul apabila cursor digerakan dihalaman blog anda. Gelembung akan timbul lalu melayang ke atas halaman blog. Jika sobat penasaran dengan tampilkan efek cantik ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadget lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:
   
   <noscript></noscript><!-- --><script type="text/javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.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>
5. Simpan gadget lalu lihat hasilnya
   
   
   Jika sobat ingin mengubah warna gelembung pada cursor silahkan ganti kode yang berwarna biru diatas kode kode warna yang anda sukai. Selamat mencoba! Good Luck!

Related Post:

Widget by [ SoniGanteng ]

Posted in: Efek