Cara Buat Efek Bubble pada cursor Blog

Posted by Gani Mugni Selasa, 20 Desember 2011 0 komentar
data:image/jpeg;base64,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

Cara Membuat Efek Bubble Pada Cursor di Blog, Yups... seperti postingan saya tentang cara membuat efek bintang berjatuhan dari kursor, Tapi kali ini tentang Efek Bubble atau bisa disebut dengan gelembung. Tips ini ane dapet dari blog kang fatur Lalu ane ulas lagi disini..



Efek ini secara otomatis akan muncul setelah sobat" menggerak"an kursor sobat. untuk contoh sobat bisa mencobanya pada kotak dibawah ini







Gimana sob???? bagus kan??

Ok deh buat sobat" yang dah kepengen ma ini tips, Langsung aja ke TKP. hehehehe
1.Login ke Blogger
2.Rancangan --> Elemen Laman --> klik Tambah Gadget --> HTML/Javascript
3.Lalu Copy dan Paste Kode Bubble Kursor Efek 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("#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>
 NB :
  • Yang berwarna MERAH Adalah Warna Dari Bubble Itu 
  • Yang berwarna BIRU Adalah Jumlah Bubble nya
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Buat Efek Bubble pada cursor Blog
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/cara-buat-efek-bubble-pada-cursor-blog.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.