Cara Buat Bubble Cursor Pada Blog

Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.


Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)



<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // 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) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

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

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>



3. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna di bawah.




Selamat Mencuba.:)

138 comments:

  1. wahhh boleh cuba ni,. tq ehh ,.. sambil tinggal jejak

    ReplyDelete
  2. terima kasih utk tutorial ni. memang dah lama mencari :)

    ReplyDelete
  3. thx a lot... da lame cari.. ^^,

    ReplyDelete
  4. kalau wordpress xde ke???

    ReplyDelete
  5. cantiknya..sy suka tengok warna warni camni..tq

    ReplyDelete
  6. sya dah ade snow cursor..boleh double function x..??
    snow and bubble at the same time..saya dah buat..x jadi la bubblenya..!! =(

    ReplyDelete
  7. elo dear.. thanks. tuto yg mnarik.. :)

    ReplyDelete
  8. thnx! chantek sgt3!
    suke sangat!
    =D

    ReplyDelete
  9. nape bubble smakin ke bawah...page jadi besar k kanan...nape erk???

    ReplyDelete
  10. thanks for the tips..i really like it...it was so nice...

    ReplyDelete
  11. follow aku www.mas-google.blogspot.com/

    ReplyDelete
  12. terimakasih infonya.. Bannernya sudah saya pasang, pasang banner saya juga ya

    ReplyDelete
  13. hye . leyh uat tutorial tok 'border kt entries' tak . tengs :)

    ReplyDelete
  14. Assalamualaikum, Tahniah dan terima kasih atas ilmu yang ditampilkan. InsyaAllah akan dimanfaatkan sebaik mungkin. Terima kasih.

    ReplyDelete
  15. thankz......i dh jadi dh....

    ReplyDelete
  16. ndak faham banyak btul ditulis situ...sapa boleh tolong? :(

    ReplyDelete
  17. sukses 3x!!!!! best3x!!

    ReplyDelete
  18. erm... masih baru di sini... seriuz xreti... dah wat dah...

    Dari dashboard > design > add a gadget( nie yang macam kiter nak tampal gambaQ @ banner 2 kan) > HTML/javascript
    biler save lame sangat2...

    ReplyDelete
  19. thanks tunjuk ajar yg sgt bagus, I Likeee

    ReplyDelete
  20. Salam.... thankz..berjaya jga akhirnya....

    ReplyDelete
  21. ..ssah larr naa bwatt
    ..lmbt plaxx

    ReplyDelete
  22. grr!!!nape bubble 2 kt head jep..tp ble scroll ke bwh,da ta te bubble..someone plishh help me!!tention dah nie..dari pg td uat bnde nie..

    ReplyDelete
  23. Terima kasih unwanted.
    banyak membantu =)

    ReplyDelete
  24. mcm mne nk tukar warne slain biru ?

    ReplyDelete
  25. sangat-sangat cantik ! amazing ! perfect ! haha . tengz

    ReplyDelete
  26. thanks for sharing.i like it.:)

    ReplyDelete
  27. atenk bawa kayu naik bis.. thank u abiss,

    ReplyDelete
  28. AWAK BENARKAN AMBIL KANDUNGAN DISINIKAN..SAYA NAK AMBIL NI LETAK KAT BLOG SAYA K..

    ReplyDelete
  29. wah..canteknyer...tp kecik sgt..memula tue ta prsn..tp...memng bagus..cantekk..

    ReplyDelete
  30. thanz tau. may ALLAH bless u :)

    ReplyDelete
  31. budak2 baru nak belajar....thanks yaaaa

    ReplyDelete
  32. ada sesiapa boleh ajar macam mana nak buat banner kat blog ? Pllzzzzzzz

    ReplyDelete
  33. NAK COPY YANG MANA EH ?
    BANYAK SANGAT LAH .

    ReplyDelete
  34. hey blog ni berguna lah .. thanks to owner blog ni

    ReplyDelete
  35. thanks.... memang jadi... terima kasih atas perkongsian ilmu...

    ReplyDelete
  36. tq..tq..dah jadi...best nye...tq sekali lagi

    ReplyDelete
  37. tengkyu, saye pake yg bubble le...
    its so nice ^_^

    ReplyDelete
  38. thx..bleh x awk buat utk tutorial buat senarai lgu??

    ReplyDelete
  39. X DER KER TUTIRIOLS UNTUK PENGUNA BLOGSKIN

    ReplyDelete
  40. dh wat dh , cntik cngt time ksih yew :D . .

    ReplyDelete
  41. cantiknya!!!
    visit my blog
    www.mafarsyar.blogspot.com ;)

    ReplyDelete
  42. Tutorial bublenya bikin blok tambah asyik dipandag....thank's!!

    ReplyDelete
  43. salam bro
    boleh tunjukkan cara nak hidden widget without tittle yang kita add dari keluar di blog
    maksud momoy . bila momoy add widget bubble tu
    ada garis di blog yang menunjukkan ada widget (html)

    ReplyDelete
  44. dah jadi dah .. thankz ..
    Follow my blog bplizz ..
    http://myrashasha.blogspot.com

    ReplyDelete
  45. sy x pahammmmmmmmmmmmmmmmmmmmmmmm ! uwarrrr :(

    ReplyDelete
  46. wah best'y bubble cursor ~ thanks ^^

    ReplyDelete
  47. Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make your point.
    You clearly know what youre talking about, why throw away
    your intelligence on just posting videos to your site when you could be giving us something informative to read?



    Check out my webpage: raspberry ketone Diet

    ReplyDelete
  48. Hi i am kavin, its my first time to commenting anywhere, when i read
    this piece of writing i thought i could also make comment due to this sensible post.



    Have a look at my blog plus de followers

    ReplyDelete
  49. Makasih, saya akan mencoba memakai ini.

    ReplyDelete
  50. thx sesgt..:))
    memang menarik..
    n btw..blog nie mmg faveret aku sbb bnyk tutorial yg super awesome utk buat blog lebih mnarik coz aku pun x reti ssgt ttg setting dlm blog..

    ReplyDelete
  51. uwaaaahhhhhh!!! menjadi la! hebatnyerrrrrrrrrr..... thank you thank you

    ReplyDelete
  52. terime kaseh, dah jadik (:
    comey sangat ~

    ReplyDelete
  53. steroids is the game / body constructing is name of sport .

    who wants to play .

    My blog post ... six pack shortcuts free download

    ReplyDelete
  54. Was carrying out standard bodybuilding routines.
    acquired muscle mass, but go no main stability, etc. Since doing athleanx, I'm not like the classic bodybuilders, just mass. I have mass and speed. really like the conditioning routines!!!

    Look into my webpage muscle building diet plan on a budget

    ReplyDelete
  55. how you can update fb in china.....?i truly want to apdate
    it

    My weblog - dating tips from my future self wiki

    ReplyDelete
  56. I'm a survivor of childhood sexual abuse and this kind of education is precisely what I'd
    personally have essential and what my mother and father would have necessary to prevent the suffering I went?

    via.

    my web site ... 60 Minute stamina free Online

    ReplyDelete
  57. tak boleh pun :( help me please :(

    ReplyDelete
  58. It is truly a nice and helpful piece of info. I am happy that you
    just shared this useful info with us. Please keep us up to date
    like this. Thank you for sharing.

    Look into my blog; vigrx plus

    ReplyDelete
  59. Thank you for the auspicious writeup. It in fact was a
    amusement account it. Look advanced to far added agreeable from you!
    By the way, how could we communicate?

    Also visit my homepage ... basyx chair

    ReplyDelete
  60. "packing a 5-inch 1080p screen, giving a PPI of who actually cares"

    Here is my webpage premature ejaculation exercise program

    ReplyDelete
  61. Hey there! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing a few
    months of hard work due to no back up. Do you have any methods
    to protect against hackers?

    Feel free to surf to my web site attraction shadow theater group youtube

    ReplyDelete
  62. Lawa la..saya pn da cuba dan da dpt pun...tq atas tutorial ni...

    ReplyDelete
  63. menjadi laa .. :) terima kasih . alang alang nak tanya , kalo nak letak deekat blog title tu , nak letak gambar kite skali , cane erk ??

    ReplyDelete
  64. Sis.. boleh saya apa fungsi blog button?

    ReplyDelete