Modifikasi Efek Gelembung Cursor Keren di Blog

Artikel kali ini membahas mengenai Modifikasi Efek Gelembung Cursor di Blog, Modifikasi ini sebenarnya terhitung sederhana karena perubahan pada jenis warna dan jumlah serta besarnya gelembungnya saja, sedangkan pada kode-kode lainnya tidak ada perubahan dan masih tampil pada aslinya. Tentunya saya bukan master dalam mengetahui kode-kode di dalam sebuah blog, Ide ini saya dapatkan melalui sebuah blog milik mas Dan (http://danforblogg.blogspot.com).

Jika pada artikel sebelumnya saya membahas Modifikasi Menu Scroll dengan Backround Gambar dan Membuat Gallery Foto Efek 3D di Blog, maka tercetus ide untuk memodifikasi desain Efek gelembung yang selalu setia mengikuti cursor kemanapun berada :D. Saya memberikan dua Script kode dalam artikel ini, pertama kode yang telah saya modifikasi dan kode asli yang saya dapatkan melalui mas Dan.

Ada dua pilihan yang dapat anda tentukan sendiri, apakah efek gelembung ini akan ditempatkan secara otomatis (Widget HTML blog) atau secara manual (Postingan Artikel Blog). Berikut:

Modifikasi Efek Gelembung Cursor di Blog

1. Masuk ke www.blogger.com
2. Tentukan pilihan anda (widget HTML atau Posting Artikel)
3. Copy dan Paste Kode di bawah ini

<script type="text/javascript"> var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, right, bottom, left dan background gelembung  var bubbles=100; // jumlah banyaknya gelembung 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>

4. Klik Pratinjau terlebih dahulu
5. Save, Publish atau Perbaharui
6. Lihat Hasilnya

Keterangan:

• Silahkan Edit warna sesuai dengan selera serta jumlah maksimal Balon
• Jika ingin mempersingkat sendiri kode di atas, baca Cara Mempersingkat Kode Panjang dengan google drive

^^ Demikian Artikel tentang Modifikasi Efek Gelembung Cursor di Blog, semoga bermanfaat bagi saya dan kita semua. Terima Kasih!!