Membuat Efek Gelembung Pada Blog

Cara Membuat Efek Gelembung Pada Blog - Kali ini bloggerku akan membahas bagaimana cara membuat efek gelembung pada blog, efek ini akan menampilkan gelembung pada cursor blogger, mungkin sobat sudah pernah melihatnya, di sini saya akan membagikan bagaimana cara membuatnya, tentu saja jika sobat menggunakan ini blog sobat akan tampil menjadi lebih cantik, ingin tau seperti apa??? yuk kita simak berikut ini

Efek gelembung pada blog ini sebenarnya sudah banyak yang membagikan tutorialnya, di sini saya akan membagikan lagi pada situs ini agar sobat tidak pusing untuk mencarinya kemana mana, tadi sudah saya jelaskan apa itu efek gelembung di awal, namun belum bagus jika sobat belum melihat demonya, untuk melihat hasilnya sobat bisa mengklik tombol di bawah ini :D, maaf sob, tombol demonya tidak tersedia, karena tidak jalan, tapi kalau di Tambah di Tata Letak tetap berjalan dengan baik hihi

Cara Membuat Efek Gelembung Pada Blog

Nah sudah jelaskan bagimana hasil yang akan sobat dapatkan, nah selanjutnya kita akan memasangnya pada blogger sobat, yuk kita simak

1. Seperti biasa sobat login dulu ke blog sobat
2. Lalu masuk ke Tata Letak lalu klik Tambah Gadget
3. Setelah itu pilih HTML / Javascript dan masukan kode di bawah

<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js" type="text/javascript"></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=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>

4. Setelah itu sobat Save / Simpan dan lihat hasilnya 8-)

Nah itulah Cara Membuat Efek Gelembung Pada Blog, jangan lupa kunjungi juga Cara Membuat Efek Salju Di Blog Keren, Sampai ketemu di artikel selanjutnya :) jika sobat ke bingungan sobat bisa tanyakan pada admin dengan cara berkomentar di bawah :D