Cara membuat Efek Gelembung di Cursor blog:: Seputar Info

Cara Memasang Efek Gelembung di Cursor Blog

Assalamu'alaikum wr.wb . Sahabat Ilmu....

Cara Memasang Efek Gelembung di Pointer Blog – Sebelumnya saya membahas Cara Agar Artikel cepat Terindex Google.  Kali ini saya akan memberikan tips bagaimana cara memperindah blog Anda dengan menambahkan gelembung yang berterbangan dari pointer / cursor blog Anda. Jika Anda ingin melihat preview-nya, silakan lihat disini. Di blog tersebut, Anda akan melihat gelembung – gelembung yang keluar dari pointer/cursor, lalu terbang ke atas dan akhirnya menghilang.

Untuk memasang efek gelembung di pointer / cursor blog, silakan lihat dibawah ini :

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FF9900", "#FF9900", "#FF9900", "#FF9900", "#FF9900"); // 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>

Anda tidak perlu pusing – pusing melihat script diatas. Cukup copy dan pastekan di teks editor, semisal Notepad atau Microsoft Word. Ganti kode #FF9900 dengan kode warna yang Anda inginkan. Kode ini akan menentukan warna gelembung yang Anda pasang di blog Anda. Gunakan Color to HTML Converter, untuk mengubah kode warna yang akan anda jadikan warna gelembung menjadi kode HTML. Ubah juga nilai 100 padavar bubbles=100; menjadi nilai yang Anda inginkan. Fungsinya untuk menentukan jumlah gelembung yang keluar.
Cara Memasang Gelembung pada Pointer Blog :

1. Seperti biasa, buka blog Anda, lalu klik Tata Letak

2. Setelah itu, klik Tambah Gadget.
3. Lalu, pilih HTML/Javascript


4. Pastekan kode diatas, dan jangan isikan apapun pada kolom Judul.Setelah itu, klik Simpan, lalu 

lihat blog Anda.

Sekian Postingan Saya kali ini jika ada kesalahan pengetikan saya mohon ma'af...

Wassalamu'alaikum.wr.wb

Sumber : disini