Colocando Cursor com Estrelas Caindo {Blogger

01 .Primeiramente, faça o login em sua conta do Blogger.

O2. Quando estiver no painel no Blogger, você verá o nome do seu blog e logo abaixo do nome dele alguns link para acessar diversas ferramentas do Blogger. Você irá clicar em "Design", veja o print

 

 

O3. Ao clicar em "Design", você será redirecionado para a área onde você pode editar a aparência do seu blog. Mude da tela "Elementos da Página", para a tela "Editar HTML".

O4. Agora você está frente-a-frente com o HTML do seu blog :) e abaixo segue o script para você poder colocar esse efeito em seu blog, selecione-o e o copie.

<br> var sparkles=50;<br> var x=ox=400;<br> var y=oy=300;<br> var swide=800;<br> var shigh=600;<br> var sleft=sdown=0;<br> var tiny=new Array();<br> var star=new Array();<br> var starv=new Array();<br> var starx=new Array();<br> var stary=new Array();<br> var tinyx=new Array();<br> var tinyy=new Array();<br> var tinyv=new Array();<br> window.onload=function() { if (document.getElementById) {<br> var i, rats, rlef, rdow;<br> for (var i=0; i<sparkles; i++) {<br> var rats=createDiv(3, 3);<br> rats.style.visibility="hidden";<br> document.body.appendChild(tiny[i]=rats);<br> starv[i]=0;<br> tinyv[i]=0;<br> var rats=createDiv(5, 5);<br> rats.style.backgroundColor="transparent";<br> rats.style.visibility="hidden";<br> var rlef=createDiv(1, 5);<br> var rdow=createDiv(5, 1);<br> rats.appendChild(rlef);<br> rats.appendChild(rdow);<br> rlef.style.top="2px";<br> rlef.style.left="0px";<br> rdow.style.top="0px";<br> rdow.style.left="2px";<br> document.body.appendChild(star[i]=rats);<br> }<br> set_width();<br> sparkle();<br> }}<br> function sparkle() {<br> var c;<br> if (x!=ox || y!=oy) {<br> ox=x;<br> oy=y;<br> for (c=0; c<sparkles; c++) if (!starv[c]) {<br> star[c].style.left=(starx[c]=x)+"px";<br> star[c].style.top=(stary[c]=y)+"px";<br> star[c].style.clip="rect(0px, 5px, 5px, 0px)";<br> star[c].style.visibility="visible";<br> starv[c]=50;<br> break;<br> }<br> }<br> for (c=0; c<sparkles; c++) {<br> if (starv[c]) update_star(c);<br> if (tinyv[c]) update_tiny(c);<br> }<br> setTimeout("sparkle()", 40);<br> }<br> function update_star(i) {<br> if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";<br> if (starv[i]) {<br> stary[i]+=1+Math.random()*3;<br> if (stary[i]<shigh+sdown) {<br> star[i].style.top=stary[i]+"px";<br> starx[i]+=(i%5-2)/5;<br> star[i].style.left=starx[i]+"px";<br> }<br> else {<br> star[i].style.visibility="hidden";<br> starv[i]=0;<br> return;<br> }<br> }<br> else {<br> tinyv[i]=50;<br> tiny[i].style.top=(tinyy[i]=stary[i])+"px";<br> tiny[i].style.left=(tinyx[i]=starx[i])+"px";<br> tiny[i].style.width="2px";<br> tiny[i].style.height="2px";<br> star[i].style.visibility="hidden";<br> tiny[i].style.visibility="visible"<br> }<br> }<br> function update_tiny(i) {<br> if (--tinyv[i]==25) {<br> tiny[i].style.width="1px";<br> tiny[i].style.height="1px";<br> }<br> if (tinyv[i]) {<br> tinyy[i]+=1+Math.random()*3;<br> if (tinyy[i]<shigh+sdown) {<br> tiny[i].style.top=tinyy[i]+"px";<br> tinyx[i]+=(i%5-2)/5;<br> tiny[i].style.left=tinyx[i]+"px";<br> }<br> else {<br> tiny[i].style.visibility="hidden";<br> tinyv[i]=0;<br> return;<br> }<br> }<br> else tiny[i].style.visibility="hidden";<br> }<br> document.onmousemove=mouse;<br> function mouse(e) {<br> set_scroll();<br> y=(e)?e.pageY:event.y+sdown;<br> x=(e)?e.pageX:event.x+sleft;<br> }<br> function set_scroll() {<br> if (typeof(self.pageYOffset)=="number") {<br> sdown=self.pageYOffset;<br> sleft=self.pageXOffset;<br> }<br> else if (document.body.scrollTop || document.body.scrollLeft) {<br> sdown=document.body.scrollTop;<br> sleft=document.body.scrollLeft;<br> }<br> else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br> sleft=document.documentElement.scrollLeft;<br> sdown=document.documentElement.scrollTop;<br> }<br> else {<br> sdown=0;<br> sleft=0;<br> }<br> }<br> window.onresize=set_width;<br> function set_width() {<br> if (typeof(self.innerWidth)=="number") {<br> swide=self.innerWidth;<br> shigh=self.innerHeight;<br> }<br> else if (document.documentElement && document.documentElement.clientWidth) {<br> swide=document.documentElement.clientWidth;<br> shigh=document.documentElement.clientHeight;<br> }<br> else if (document.body.clientWidth) {<br> swide=document.body.clientWidth;<br> shigh=document.body.clientHeight;<br> }<br> }<br> function createDiv(height, width) {<br> var div=document.createElement("div");<br> div.style.position="absolute";<br> div.style.height=height+"px";<br> div.style.width=width+"px";<br> div.style.overflow="hidden";<br> div.style.backgroundColor=colour;<br> return (div);<br> }<br> // ]]><br> </script><font size="2"><font face="trebuchet ms,sans-serif">

O5. Após copiar o código, vá para página do HTML do seu blog e procure pela palavra . Para achá-la com mais fácilidade, é só usar o campo de pesquisa, para acessá-lo é só teclar "Ctrl+F" e fazer sua pesquisa.

O6. Quando encontrar a palavra , cole o script que você copiou antes dela e clique em "Visualizar". Se estiver tudo certo com seu blog e o efeito estiver funcionando, feche a página de visualização e clique em "Salvar Modelo".

O7. Pronto! Para modificar a cor das estrelinhas, você deve fazer uma pequena alteração no script, alterando o código da cor em var colour="#FFFFFF"

A cor que está no script é o branco, abaixo segue o código de algumas cores pra você utilizar no seu script:

VERMELHO: #FF0000

ROSA: #FF69B4

ROXO: #912CEE

AZUL: #0000FF

AZUL CLARO: #1E90FF

VERDE: #00FF00

AMARELO: #FFD700

ALARANJADO: #FF8C00

PRETO: #000000

Todos os creditos a PHOTOSCAPE EDIÇÕES

Participe tbm da nossa comunidade no orkut. 

TUDO PARA SEU PHOTOSCAPE