Loading...

Cara Membuat Efek Bubble / Gelembung Pada Blog


Cara membuat effect bubble pada blog, membuat efek bubble di blogger, membuat efek gelembung di blog, efek bubble pada blog, efek bubble keren untuk blogspot..

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.
 efek buble pada blog
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.
Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Efek Bubble / Gelembung Pada Blog
Cara Membuat Efek Bubble / Gelembung Pada Blog
Cara membuat effect bubble pada blog, membuat efek bubble di blogger, membuat efek gelembung di blog, efek bubble pada blog, efek bubble keren untuk blogspot..
https://1.bp.blogspot.com/-XEFSNlEtx5o/UcvOjeOzweI/AAAAAAAAFtI/xoS75XMhcc0/s320/bubble.jpg
https://1.bp.blogspot.com/-XEFSNlEtx5o/UcvOjeOzweI/AAAAAAAAFtI/xoS75XMhcc0/s72-c/bubble.jpg
Bangiz
https://bangiz.blogspot.com/2013/06/Bubble-Effect.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/06/Bubble-Effect.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy