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

Post a Comment

16 Comments:

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

Byk benda boleh dibuat kalau rajin....heheheh


Selamat tahun baru buat tuan sekeluarga... :D

Abed Saragih said...
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 said...
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 said...
Teknik Buat Blog

wah kerentutorialnya izinsave dulu hehe

gadis mystery said...
Teknik Buat Blog

terima kasih tuan...

Anonymous said...
Teknik Buat Blog

thanks banyak2 sbb ajar buat semua tu...thanks

Anonymous said...
Teknik Buat Blog

thanks atas informasinya yang bermanfaat

BLACK HAWK said...
Teknik Buat Blog

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

grosir busana muslim said...
Teknik Buat Blog

artikel tulisan yang baik,,nice post slam kenal

aida said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

THX :)
aku bisa akhirnya..

Shuhaida Subri said...
Teknik Buat Blog

best la blog ni.

arie5758 said...
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 :)

Harith Irfan said...
Teknik Buat Blog

tq very much

Anonymous said...
Teknik Buat Blog

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