Cara Menciptakan Pengaruh Gelembung Di Cursor Blog

Baca Juga

Cara menciptakan imbas gelembung di blog ialah dengan cara menambahkan sebuah script yang berfungsi untuk menampilkan gelembung di cursor.

Bagi pengguna blogger ada 2 cara yang dapat dilakukan untuk memasang imbas gelembung di blog, yaitu :

1. Melalui Tata Letak
2. Melalui halaman editor template

Dari 2 cara di atas berdasarkan saya cara yang paling gampang ialah cara pertama, dan untuk lebih jelasnya silakan baca terus

Cara Memasang Efek Gelembung Di Blogger

Di sini saya akan menuliskan 2 cara di atas satu per-satu, silakan terapkan salah satu cara yang sahabat mau.

Pertama : Memasang Efek Gelembung Melaui Tata Letak

• Masuk ke dasbor blogger
• Buka halaman Tata Letak
• Klik Tambahkan Gadget
• Pilih Gadget HTML/JavaScript
• Masukkan script imbas gelembung yang saya sertakan di simpulan artikel ini pada bab konten
• Selesai

Kedua : Memasang Efek Gelembung Melaui Halaman Editor Template Blogger

• Pada dasbor blogger buka halaman Template
• Backup dahulu template yang sahabat gunakan untuk jaga-jaga
• Klik tombol Edit HTML
• Sisipkan script imbas gelembung sebelum isyarat </body>
• Simpan pengaturan template
• Selesai

Nah itulah 2 cara yang dapat kita lakukan.

Adapun script imbas gelembung yang dapat kita gunakan ialah ini :

 <script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); // 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> 

Keterangan :
var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); → Kode #cc0000 ialah isyarat warna untuk gelembung, silakan ganti kode-kode tersebut dengan isyarat warna yang sahabat inginkan
var bubbles=100; → Kode 100 ialah jumlah maksimum gelembung yang keluar, silakan ganti nilai tersebut sesuai selera.

-