Berlanggan Via Email

Enter your email address:

My Friend

Cara Membuat Efek Gelembung Cursor Di Blog

Cara

Cara Membuat Efek Gelembung Cursor Di Blog ini lah judul postingan BLOG RANGGA pada kali ini , efek gelembung ini akan keluar otomatis pada saat cursor di gerakan pada saat membuka halaman blog sobat seperti pada halaman blog ini atau gambar diatas blog ini , Efek gelembung ini biasa juga di sebut dalam bahasa kampoeng saya yaitu Efek Bubble he...he...

Bagi sobat berminat memasang efek gelembung atau  efek bubble di blog sobat bisa mengikuti langkah-langkah nya di bawah ini :

  • Login dulu ke blog sobat
  • Pilih rancangan =>>Elemen Laman =>> klik Tambah Gadget =>>HTML/Javascript
  • Lalu Copy dan Paste Kode  Efek Gelembung  Cursor di bawah ini di kotak HTML/Javascript
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#422BF0", "#422BF0", "#422BF0", "#422BF0", "#422BF0"); // 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>

  • Kalau sobat ingin mengganti warna gelembung tersebut bisa sobat dengan mengganti kode warna HTML yang di stabilo biru diatas sesuai dengan keinginan sobat , untuk mencari kode HTML warna bisa sobat cari di halaman Kode Warna HTML buat Blog atau langsung dapatkan kode nya melalui link INI

    •  Untuk kode yang di stabilo hijau adalah banyak efek gelembung , bisa sobat ganti berapa banyak gelembung nya sesuai keinginan sobat

    • Terakhir klik simpan dan coba lihat hasilnya di blog sobat ......


    SELAMAT MENCOBA

Klik tombol berbagi :

7 komentar:

Wawan Siswanto mengatakan...

Mantap sob infonya, . .

blog rangga mengatakan...

terima kasih boss atas kunjungan dan komentar nya....

gusmanto mengatakan...

wah mantp tapi kok tidak bisa gax ada setelah di coba

blog rangga mengatakan...

makasih atas koment nya gan , coba di ulang lagi gan , copy paste semua kode dan jangan ada yang ketinggalan kode nya gan lalu copas ke halaman HTML blog agan , warna di ubah gan biar keliatan di blog agan dengan mengganti kode yang di stabilo di atas , selamat mencoba gan....

Blog SEO Dofollow mengatakan...

wuih manteb , ijin nyobain Gan :D

blog rangga mengatakan...

makasih atas kunjungan nya , silahkan gan ....!!!

Unknown mengatakan...

kalau cari Pilih rancangan =>>Elemen Laman =>> klik Tambah Gadget =>>HTML/Javascrip

damana ya gan,, di ma'lum ya,, anak baru