Colocando bolhas caindo do ponteiro do mouse no blog

Olá povo, vim deixar outro tuto. Vou ensinar como colocar bolhas saindo do ponteiro do mouse no blog. O tuto que vou ensinar está com bolhas azuis, mais você pode mudar a cor com a tabela de cores. OBS: Se seu blog já tiver um ponteiro do mouse que cai glitter não funciona. Aqui está o código e o tuto logo após:

<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div> <div> <span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: x-small;"><script type="text/javascript"> // <![CDATA[ var colours=new Array(" #BA55D3", "#DA70D6", "#FF00FF", "#FF1493", "#FFEFDB"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=66; // 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></span><br /></div>

1°: Copie o código acima e colar em algum editor de texto que tenha no seu computador, o mais fácil e que todos tem é o bloco de notas.

2°: Escolha uma cor para suas bolhas. Veja um trecho do código acima:

var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc");

                      Explicando: 

                      Vermelho: Cor da parte de cima da bolha

                      Laranja   : Cor do lado direito da bolha

                      Azul        : Cor da parte de baixo da bolha

            Roxo       : Cor do lado esquerdo da bolha

  Preto       : Cor do fundo da bolha

Tenham cuidado na hora de modificar o código. Para modificar as cores entre no site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e copie o código HTML da cor e substitua todas as cores que você quiser.

3°: Agora vamos escolher quantas bolhas vão ter na página. Vou mostrar outra parte do código para dar um exemplo:

var bubbles=66

É só mudar o 66 pelo número que você preferir.

4º : Copie o código que você editou no editor de textos (Bloco de notas) e ir em Design >> Editar HTML >> Agora procure no código por </body>, use CTLR + F para procurar. Agora cole o código que você modificou antes do </body>. Visualize e passe o mouse pela sua página e veja se as bolhas estão saindo do mouse e se você gostou do resultado, se sim salve e saia se não gostou aperte Cancel.

Qualquer dúvida ésó comentar!!

Aprendi no blog Todinha na Moda.