Botar bolhas no blog - mouse

 Copia o codigo que esta dentro da caixa de texto



<script type="text/javascript"> // <![CDATA[ var colours=new Array("#a6f", "#FF4500", "#FF4500", "#FF4500", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=666; // 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>

2º Passo) Escolher as cores das bolhas. No começo do código tem uma parte que está destacada com várias cores. Vou repetir essa linha do código aqui para poder explicar como muda as cores.

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

A parte em :
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

OBS: Muito cuidado antes de alterar o código.

Para alterar as cores entre nesse site: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e copie o código HTML da cor e substitua no lugar de qualquer uma das cores do código.

3º Passo) Agora vamos escolher quantas bolhas no máximo vai ter na página. Vou copiar outra parte do código aqui só pra exemplificar. Essa parte esta no começo do código também, junto com a parte das cores.

var bubbles=66

Aqui é só ir mudando o valor e ver qual quantidade de bolhas você prefere.

4º Passo) Agora é só copiar o código que você editou e ir no Tumblr >> Customize >> Themes >> Use Custom HTML >> Agora procure no código por </body>, use CTLR F para procurar. Agora cole o código que você modificou imediatamente antes do </body>. Aperte Update Preview e espere a página carregar, passe o mouse pela sua página que está ao fundo 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.



fonte: http://www.tumblr.com/tagged/bolhas?before=1324151862