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

140 comments:

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

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

    ReplyDelete
  3. kalau wordpress xde ke???

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  14. thankz......i dh jadi dh....

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

    ReplyDelete
  16. sukses 3x!!!!! best3x!!

    ReplyDelete
  17. 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
  18. thanks tunjuk ajar yg sgt bagus, I Likeee

    ReplyDelete
  19. Salam.... thankz..berjaya jga akhirnya....

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

    ReplyDelete
  21. 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
  22. Terima kasih unwanted.
    banyak membantu =)

    ReplyDelete
  23. mcm mne nk tukar warne slain biru ?

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

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

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

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

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

    ReplyDelete
  29. dah jadi,cantik sangat..thanks(=

    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. thanks kakak!!
    wat bubble cursornya,,,

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

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

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

    ReplyDelete
  44. thank's ea dh mw berbagi ilmu..

    ReplyDelete
  45. 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
  46. dah jadi dah .. thankz ..
    Follow my blog bplizz ..
    http://myrashasha.blogspot.com

    ReplyDelete
  47. sy x pahammmmmmmmmmmmmmmmmmmmmmmm ! uwarrrr :(

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

    ReplyDelete
  49. 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
  50. 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
  51. Makasih, saya akan mencoba memakai ini.

    ReplyDelete
  52. 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
  53. uwaaaahhhhhh!!! menjadi la! hebatnyerrrrrrrrrr..... thank you thank you

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

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

    who wants to play .

    My blog post ... six pack shortcuts free download

    ReplyDelete
  56. 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
  57. how you can update fb in china.....?i truly want to apdate
    it

    My weblog - dating tips from my future self wiki

    ReplyDelete
  58. 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
  59. tak boleh pun :( help me please :(

    ReplyDelete
  60. 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
  61. 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
  62. "packing a 5-inch 1080p screen, giving a PPI of who actually cares"

    Here is my webpage premature ejaculation exercise program

    ReplyDelete
  63. 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
  64. Lawa la..saya pn da cuba dan da dpt pun...tq atas tutorial ni...

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

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

    ReplyDelete