Cara buat kursor buih

Kursor ini seakan akan sama dengan kursor bintang berjatuhan sebelum ini,tetapi kali ini adalah dalam bentuk gelembung buih yang akan naik keatas bila kursor digerakkan.
bubble cursor

Cara memasangnya:
1.Log in keblogger terlebih dahulu
2.Pilih Layout...Add a Gadget



3.HTML/Javascript  
4.Masukkan kod dibawah ini :
<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/kursorbuih.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#695DA2", "#695DA2", "#695DA2", "#695DA2", "#695DA2"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

*(c) 2009 mf2fm web-design *

****************************/

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>
# warna buih boleh ditukarkan pada teks berwarna oren dan kod nya boleh didapati disini

5.Kemudian klik pada save

update 8/5/2013

Catat Ulasan

16 Comments:

Melati Qistyna's Mummy berkata...
Teknik Buat Blog

Byk benda boleh dibuat kalau rajin....heheheh


Selamat tahun baru buat tuan sekeluarga... :D

Abed Saragih berkata...
Teknik Buat Blog

Mas,,saya mau tanya nih..

gmna membuat postingan di halaman 2 sama persis dengan tampilan di halaman sebelumnya (hal 1)

soalnya pada hal 2 bentuk postingannya cuma judul aja?Tlong bantuannya :)

Andi berkata...
Teknik Buat Blog

wuih, kebetulan lagi nyari nih :D
mampir ya http://sekedar-tutorial.blogspot.com/2012/01/karapan-sapi-tradisi-madura-asli.html

sampeweweh berkata...
Teknik Buat Blog

wah kerentutorialnya izinsave dulu hehe

gadis mystery berkata...
Teknik Buat Blog

terima kasih tuan...

danial berkata...
Teknik Buat Blog

thanks banyak2 sbb ajar buat semua tu...thanks

Rudy Hartono berkata...
Teknik Buat Blog

thanks atas informasinya yang bermanfaat

BLACK HAWK berkata...
Teknik Buat Blog

Terima Kasih Telah Berkunjung!!!!!!!!!!!!!!

grosir busana muslim berkata...
Teknik Buat Blog

artikel tulisan yang baik,,nice post slam kenal

aida berkata...
Teknik Buat Blog

makasih tuk tutorialnya. tau cara pasang efek salju yang berjatuhan pada halaman blog. tolong dijawab. makasih.

keroppi_ijo berkata...
Teknik Buat Blog

baehasiiil..hehe..
thx :)
selain buih donk :D

keroppi_ijo berkata...
Teknik Buat Blog

THX :)
aku bisa akhirnya..

Shuhaida Subri berkata...
Teknik Buat Blog

best la blog ni.

arie5758 berkata...
Teknik Buat Blog

Wah yang saya cari ternyata ketemu disini, terima kasih ya sob sharing ilmunya. Sementara saya ijin menyimpan di notepad, karena belakangan template saya sering error jika ditambah script baru :)

aneh... berkata...
Teknik Buat Blog

tq very much

Chiiicah berkata...
Teknik Buat Blog

Bosan bintang jatuh, coba yg buih ahh....