Eu já perdi a conta de quantas pessoas me pediram pra ensinar a colocar em seus blogs essas estrelinhas que saem do mouse... Finalmente eu vou ensinar a vocês e espero que todos consigam fazer, vamos mecher bastante com HTML e isso pode complicar muita gente, então prestem bastante atenção e qualquer dúvida é só dizer. Ao tutorial:
O1. 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:
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
O5. Após copiar o código, vá para página do HTML do seu blog e procure pela palavra </body>. 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 </body>, 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
Adorei a dica, meu blog ficou lindo!
ResponderExcluirObrigada!!
Faz tempo que estava procurando codigo para colocar estrelas saindo curso do mause.fikou d+ meu blog.Obigada.
ResponderExcluirADOREEEEEEEEEEEEIIIIIIIIIIIIIIII COLEGAAAAAAAAAAAAAA
ResponderExcluirFIKOU MTO SHOW
OBRIGADA MESMO VIW
:*
cara meu blog ficou lindo!
ResponderExcluirobrigada, e coloca mais dicas ensinando a enfeitar o nosso blog? ia ser muito legal!
beijos.
Queria saber como muda a imagem que nesse caso esta escrito photoscape edicoes!
ResponderExcluirObrigada por isso e pelas estrelinhas tambem!
Amei , coloquei no meu blog e ficou lindo .
ResponderExcluirDá uma olhada http://belatosca.blogspot.com/
Eu conseguir, vlw, ajudou e muito, quem não conseguir fazer é burro, PRONTOFALEI!
ResponderExcluirAdorei esse efeito,o meu blog ficou mais lindo ainda!!!
ResponderExcluirObrigada por compartilhar conosco sua criatividade.
Bjos.
Noossa, Mt obrigada!!!
ResponderExcluirEu sempre achei(e acho) seu blog incrivel, principalmente por causa do cursor com as estrelinhas ^^
Adoro PhotoScape, vc me ajuda muitooo!
Mais uma vez, Muito Obrigada!
Visitem: http://agarotadorock.blogspot.com/
amei demais *-*
ResponderExcluirmeu blog ficou bem mais legal ;D
obrigada, seu blog é muuito bom! e me ajuda muito.
adoreei! deu certinho :p
ResponderExcluirAmei demais :D Meu blog ficou lindo :D
ResponderExcluirObrigadooooo valeu eu nunca ia saber que teria que ser antes do body valeu mesmo
ResponderExcluirAhhhh ameeei *---*
ResponderExcluirFazia um tempinho que eu tava tentando colocar :D
Ficou lindo!
Brigaada xD
http://happinesshared.blogspot.com/
minha primeira manifestação por aqui hihi.
ResponderExcluirPerfeito, perfeito *-*
Você podia dar mais dicas pra essas coisas de HTML, eu não entendo nada ç.ç
PhotoScape Edições ♥
Muito orbigada Nathi *------*
ResponderExcluirFicou muito lindo !
Ficou certinho!
Adoreeei ! (:
Beeijos =*
ADOREI! D+ alias seu Blog é D + !
ResponderExcluirAAh o blog da gente fica muito lindo ! obrigada mesmo, adoro suas dicas.
ResponderExcluirQue bom gostaram gente! Beijos pra vocês ^^
ResponderExcluirOwn muiito OBG. ontém msm eu tava aq. no Blog. pedindo isso :D Muiito OBG. Melhor Blog. q. Conheço éé EssE aq. :D
ResponderExcluirGente muito obrigada viu, vocês são demais mesmo!
ResponderExcluirJacque eu te respondi lá, nem percebi que foi você quem comentou aqui... Beijooos linda!
adorei fazia horas que procurava este código brigadão
ResponderExcluirMeu blog ficou fofo!! visitem http://superluxuosas.blogspot.com/
ResponderExcluir- Adorei, montei um blog recentemente mas com essas estrelinhas, ja esta um show! Valeu!
ResponderExcluirAmeeeeei ♥
ResponderExcluirMt perfeito *-*
ResponderExcluirEntrem: http://justinbieberforever-jbf.blogspot.com/
Muito obrigada PS Edições ! Vocês são realmente demais ;)
ResponderExcluirmassa seu blog d+ cara vc me ajudou bastante..mais eu demorei mt pra colocar isso no meu blog e demorei mais ainda pra mudar a cor mais wlw
ResponderExcluirObrigada ajudou muito sempre quis isso, kkkkk
ResponderExcluirAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH, obrigada *-*, eu tava mt louca procurando como fazer isso *-*, ignore meu comentario em outro tpc daqui nathi (intimidade k .q*-*
ResponderExcluirAdorei coloquei no meu blog .
ResponderExcluirVer ai como ficou
brilho-de-estrela.blogspot.com
aaah sonho se realizando! AUHAAUH' *-*
ResponderExcluireu smp achei super fofas essas estrelinhas..
agora eu tenho elas no meu blog! awn *-*
paarabeens Nathalia! <33
Oi adorei o script e multo bom mesmo
ResponderExcluirisso sim deu certoooooooo........ameiiiii...bjs bjs bjs
ResponderExcluirnossa, a teeempos eu tava procuraando isso *_*
ResponderExcluirobriigada *O*
*--* OBRIGADA <333 *--*
ResponderExcluirMuito obrigadaaaaaa! :)
ResponderExcluirAmei, perfeito obg!!!
ResponderExcluiramooo seu blog deu certiiinhoo amei e parabéns pelo blog
ResponderExcluirMuiito Boom !!! :D
ResponderExcluirEu gosteii muiito estava procurando isso para o meu blog(http://fanny-rock.blogspot.com/)
Vou pedir para os meus amiigos seguir esse blogc!!
MEU PARABÉNS SEU BLOG É MUIITO BOMM
http://fanny-rock.blogspot.com/
Gostei da dica e ameei o blog... Acessa o meu??
ResponderExcluirHyperDoll.blogspot.com
Obrigada *-*
AMo seu blog
ResponderExcluirEu ameiiiiiiiiii! seu blog é o melhoRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR!!!
ResponderExcluirgentemmmmmm ficou show com sua dica , brigadinha bjs
ResponderExcluirMuito obrigada! Decidi estilizar meu blog e estava procurando por isso!
ResponderExcluirValeu mesmo!!!
Obrigada
ResponderExcluiradorei o blogger parabens!!!
Valeu aí pela dica!
ResponderExcluiradoreii fico perfeito :)
ResponderExcluirConsegui! Obrigada! Amei o Blog! Beijos!
ResponderExcluirmuitooooooooo booom.... valeeew
ResponderExcluirAMEEEEEEEEEEI MSM. FICO SUPER FOFO NO MEU BLOG. TAVA PROCURANDO A UM TEMPAO E NUNCA CONSEGUI. AGORA TA PRONTO. AJUDO BASTANTEEEE. BJOOS
ResponderExcluirUAUUU!!! Meu blog ficou 1000!!! Valeu!!!
ResponderExcluirObrigada, procurei por seculo e nao achei como fazer isso me ajudo bastante amor amei *-*
ResponderExcluirameiii muito obrigada'
ResponderExcluirficou lindo! esse blog já me ajdou mto entra awe no meu:
ResponderExcluirblogs-time.blogspot.com
aaaaah eu consegui !!!! *-*
ResponderExcluirobrigada, suas dicas salvam minha vida HAHAHA
ain obrigadaaaa!! amei amei!
ResponderExcluirAaaa amei fico muito lindo no meu Blog seu blog é muito bom
ResponderExcluirAdorei ...dica foi d+ brigaduu
ResponderExcluiraaah adorei brigadinhoo :D
ResponderExcluirpoxa valeu mesmo.....adoreiiii
ResponderExcluirNossa mto obrigadoo, meu blog ta ficando cada vez melhor *----* www.munyblogcoolthings.blogspot.com
ResponderExcluirhttp://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
ResponderExcluirNesse site tem várias cores para vc colocar !
Nossa vlw msm!
ResponderExcluirAdorei!
NOSSA VALEW MESMO FICOU LINDO *-*
ResponderExcluiraaamei fikou mto show!
ResponderExcluirObg Ficou Lindo! *-*
ResponderExcluirObrigada,meesmo . Ficou lindo.
ResponderExcluirhttp://neversay2.blogspot.com/
AMEI!!!!FINALMENTE CONSEGUI COLOCAR NO MEU BLOG E FICOU D+ !!!!!!!!!!!
ResponderExcluirAMEI A DICA
ResponderExcluirMUITO D+
OBG BJOKS =D
@BempraMente
@suellenxavier
vlw me ajudou mt
ResponderExcluirObg deu certo :D
ResponderExcluirmuito obrigado!!!
ResponderExcluiradorei!!!
blog muito bom
owww bligada meu blog ficou show ^^
ResponderExcluirOMG! ESTAVA QUERENDO COLOCAR ESSAS ESTRELINHAS NO MEU BLOG *-* TANK YOUR *-* para mostrar minha gratidão, vou seguir seu blog, só faz um favorzinho pra mim ? segue o meu ? www.vmsonhodejogo.blogspot.com (:
ResponderExcluirDemaaaaaaaaaaaaaaais essas dicas!!! AMEEEEEEEEEEEI <3
ResponderExcluirQuantos comentários ^^ Obrigada gente, que bom que gostaram e que conseguiram fazer! Bjs ♥
ResponderExcluirAdorei!! meu blogger esta lindo.Obrigada beijos.
ResponderExcluirnossa fikou lindo as estrelinhas caindo do cursor no meu blog!
ResponderExcluirEsse blog é tudo de bom,parabens Nahalia Matos
♥ ♥ ♥
ResponderExcluirobg!adoreii
ResponderExcluirameii, otimoo, adoreiii
ResponderExcluirMuito obg ameeeeeeeeei, fazia maior tempão que tentava fazer isso. OBG
ResponderExcluiradorei *-* me ajudou bastante
ResponderExcluirvlw
ResponderExcluirAmei para berabens'
ResponderExcluirBrigadão
Obrigada mesmo, faz maior tempão que estou procurando isso.
ResponderExcluirObrigado mesmo !!
ResponderExcluiradoreiiii !! valeuu !!
ResponderExcluirx Ameeeeeeeeeeeeei, emu bloog ficou liiindo.
ResponderExcluirSuuper shhooow, obg.
AH, SEU BLOG É DEEMAIIIS' ((:
Consegui , obrigado meu blog ficou perfeito !
ResponderExcluirQueria isso a muito tempo .
VALEUUUUUUUU
fico perfeitoooo :D
ResponderExcluirolhem : http://famyliasophia-f.blogspot.com/
valeu a ajuda ficou muitoloco.
ResponderExcluirAaa muito Obrigado!
ResponderExcluirAdorei o seu Blog!
cara vlw meu blog ta muito fofoooo
ResponderExcluirMto legal ,obrigada *--*
ResponderExcluirAdooorei,Obrigada :D
ResponderExcluirVc brilha menina *-* Muitoo lindo ameei de verdade Obrigadaa sz'
ResponderExcluirBjuus'
valeuu, ajudou mt!!
ResponderExcluir=]
Legal funcionou !
ResponderExcluirNossa,voocê ajudou muito eu adoreii♥
ResponderExcluirAiii Valleu Mesmoo Ajudoo Muitoo No meeu blog valleu bjs
ResponderExcluirAMEI .................
ResponderExcluirAJUDOU E MUITO .
AGORA TÁ MAS PERFEITO AINDA MEU BLOG !
AMEII !!
ameiiiiii meu blog ficou PERFEITOOOO♥
ResponderExcluirAmeeeeeeeeeeeeeeeeeeeeeeeeeeeeei muuito...
ResponderExcluirFicou perfect!
Obrigadaaa, muuuito obrigadaa!
Muito bom, perfeito, amei.
ResponderExcluirParabéns, que lhe rende bons frutos.
obrigada,
Letícia
Nossa Ajudou Muiiiiiiiiiiito ! Ameeeeei *-*
ResponderExcluirObg ♥
Nossa, eu amei essas estrelinhas no meu blog ajudou viu? Continue postando essas máterias incríveis tchau
ResponderExcluir=0 moh legal, adorei, ficou perfeito, obrigado=]
ResponderExcluirconsegui.Ficou lindo.Bom poder contar com você.obrigada
ResponderExcluirNossa adoreiii meu blog ficou muuuuuuuuuuito mais lindo,obg por essa dica bejuu :*
ResponderExcluirObrigadaa...Deu certo
ResponderExcluirfico maneiro mto lindjoo *-* , so q eu nn consigo muda a cor da estrelinhas :(
ResponderExcluiradorei, deu mtu certo *--* vllw
ResponderExcluirObrigada!!! Me ajudou muito! Ficou lindo!
ResponderExcluirAiiinw, tava louca da vida pq não tava conseguindo colocar esse cursor, o blog é super explicadinho e foi bem fácil colocar! Vlw ;D
ResponderExcluirAmei!! me ajudou muito , meu blog ficou lindo.
ResponderExcluirBjussssssss
Obrigado Nathalia , consegui e ficou muito bom . *-*
ResponderExcluirSENSACIONAL!OBG NATHALIA!
ResponderExcluirPESSOAL VEJAM MEU BLOG!
http://risosrebelde.blogspot.com.br/
BJUSSSS!
Amei
ResponderExcluirblog:
http://sweet-dream-officer.blogspot.com.br/
Gente deu certo obrigado!
ResponderExcluirVisite meu blog é:
Mattelken.blogspot.com.br
vlw ta show de bola
ResponderExcluirowwwnnnttt obg foufa deu certo
ResponderExcluirADOREI A DICA MUITO OBRIGADA :)
ResponderExcluirAmeeei a Diica Obg :)
ResponderExcluirVLW! BEIJAOOO
ResponderExcluirGente, eu tenho que atualizar esse tuto né, a plataforma do Blogger mudou toda já "/ Obrigada pelo apoio e comentário de vocês!
ResponderExcluir