Cara Membuat Efek Bubble / Gelembung Pada Blog

• min read

Table of Contents

Bangiz - Jika Anda memiliki blog dan saat ini sedang merenovasi tampilan blog supaya lebih indah dan SEO friendly. Tentunya banyak sekali hal yang perlu dan bisa Anda lakukan mulai dari mengatur tata letak, jenis huruf yang akan Anda gunakan, warna background baik itu background template maupun untuk halaman postingan, dan banyak lagi hal yang lainnya. Bahkan untuk memudahkan saat ini banyak sekali template yang bisa Anda download baik itu untuk blogger, wordpress, dan sebagainya sesuai dengan subdomain yang Anda gunakan.

Berikut ini menurut sebagian orang perlu dan sebagian lain mungkin mengatakan tidak perlu memodifikasinya. Cursor mouse merupakan hak yang penting ketika Anda menggunakan komputer. Untuk tampilannya di blog, Anda bisa merubah sesuai dengan yang Anda suka dan bisa juga dengan menambahkan effect. Pada postingan sebelumnya Bangiz juga pernah membahas tentang effect pada cursor mouse yaitu efek salju yang berjatuhan dan efek text yang bisa mengikuti cursor. Kalau ingin mencoba efek tersebit silahkan baca saja caranya.

Bubble effect / ilustrasi

Supaya tidak bertambah panjang lagi tulisannya kita langsung saja pada pembahasan sesuai dengan judul di atas yaitu cara membuat efek bubble / gelembung pada cursor mouse. Berikut ini ada 2 cara:

Langkah pertama:

1. Masuk dasbor Blogger > Template > Edit HTML.

2. Copas kode berikut di atas kode </head>.

<script src='https://boyz.googlecode.com/svn/JS/bublecursor.js' type='text/javascript'></script>

Langkah kedua:

1. Masuk dasbor Blogger > Tata Letak > Tambahkan Gadget > HTML/Javascript.

2. Copy paste kode berikut dan Simpan.

<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=150; // 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:

Warna pink merupakan warna gelembung, dapatkan kode lainnya disini.
Warna biru adalah jumlah banyaknya gelembung, silahkan ganti sesuai kebutuhan Anda.

Itulah salah satu cara untuk membuat blog Anda unik yaitu dengan menambahkan efek gelembung. Silahkan berbagi melalui tombol sosial media di bawah.