[Blogger - Hacks] - Efeito de estrelinhas saindo da ponta do mouse

Olá querido leitor, neste artigo eu mostrarei como colocar um rastro de "estrelinhas" (sinais de adição na verdade), saindo da ponta do mouse. Eu já vi esse efeito em diversos blogs — na grande maioria blogs femininos —, e achei que seria interessante mostrar como aplicar esse efeito, afinal de contas, há muitas blogueiras também na blogosfera. Se você não sabe do que eu estou falando, visite nosso blog de testes e observe que ao movimentar o mouse pelo blog, diversas estrelas começarão a cair da ponta do mouse.

Foto por: Skiwalker79

Esse efeito é muito simples de ser aplicado ao blog, mas requer que mexamos com os códigos do template, portanto, siga os passos com cautela para não ocorrer nenhum tipo de problema.

Aplicando estrelinhas na ponta do mouse em blogs do Blogger


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</body>

3. Imediatamente acima deste código, adicione este outro código.

<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>


4. No código acima, há uma parte que foi destacada em vermelho, essa parte é responsável por adicionar a cor das estrelinhas, para ver uma tabela com diversas cores disponíveis, basta clicar aqui. Depois de escolher a cor que você quer, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora basta ir em seu blog para conferir como ficou o efeito, e para ver se ele está funcionando corretamente. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se à vontade para participar deixando um comentário.

Com informações: PhotoScape Edições e Cursores Girlspt

Atualização — 21.04.2012 às 00h05
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 14 comentários neste artigo!

  1. Faz mais de semana que venho tenhto coloca esse efeito mais ninguem explicava direito... PERFEITA a sua explicação!!!
    Adorei!!!

    ResponderExcluir
  2. NUSS BEM EXPLICADO E SUPER FÁCIL VALEU

    ResponderExcluir
  3. PROCUREI VARIAS VEZES E NÃO CONSEGUIA FAZER, SUA EXPLICAÇÃO FOI ÓTIMA PARA QUEM É LEIGO NO ASSUNTO, VALEU MESMO! OBRIGADA.

    ResponderExcluir
  4. Nem tenho palavras pra descrever este post...
    Ah, peraí.. Eu tenho:
    - INCRÍVEL -
    Me ajudou bastante com o meu blog feminino e deu um toque bem legal e diferenciado graças a você! Muito muito muito muito obrigada!

    ResponderExcluir
    Respostas
    1. Olá Yasmin, que bom que você gostou do artigo e que conseguiu instalar o efeito em seu blog! Eu que agradeço a visita e o comentário. Volte sempre!

      Excluir
  5. Gostei ! Eu consegui colocar as estrelinhas apenas não consegui personalizar a cor , mais mesmo assim foi uma ótima opção ter entrado justamente no seu site ! Além de fácil e pratico me ajudou muito no meu blog que fala sobre musica ,look's , acessórios em fim coisas de mulher , eu estava mesmo precisando de um toque pra deixar perfeito >.< Vlw .. Bye bye .. *-* ...

    ResponderExcluir
    Respostas
    1. Mariana, fico feliz que tenha gostado e que tenha conseguido instalar no seu blog! Quanto a mudar a cor, é bem simples de ser feito, siga os seguintes passos: acesse o editor do seu template "Editar HTML", e procure o código que você adicionou para gerar as estrelinhas. Após encontrar o código, você verá que na segunda linha dele está escrito o seguinte: var colour="#FFFFFF";. Esse monte de letras F indicam que a cor das estrelinhas deve ser branca, basta você alterar esse monte de F para alterar a cor. Você pode ver uma tabela de cores clicando aqui, basta escolher o código da cor que você mais gostar e colar no lugar das letras F. Espero que isso ajude. Qualquer dúvida é só comentar! Agradeço a visita e o comentário, volte sempre!

      Excluir
  6. Muito bom!!! Consegui fazer, mas não conseguir mudar de cor!! =(

    ResponderExcluir
    Respostas
    1. Olá Michelle, fico feliz que tenha conseguido seguir o tutorial. Quanto a mudar a cor das estrelinhas, é bem simples. Note que na terceira linha do código do passo 3, há o seguinte comando: var colour="#FFFFFF";. Esse monte de "F" é responsável por gerar a cor branca para as estrelas. Parar alterar a cor delas, basta você substituir esse monte de "F" pela cor que você quer. Você pode ver uma tabela com diversas cores nesse endereço: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm. Ao acessá-lo, você verá que na frente de cada cor há uma coluna chamada "Código HTML", basta copiar o código html da cor que mais lhe agradar e substituir aquele monte de "F". Espero que isso ajude. Agradeço a visita e o comentário. Volte sempre.

      Excluir
  7. Amei! Vc ajudou-me a realizar meu sonho com relação a um efeito de estrelinhas que sempre quis no meu blog!

    ResponderExcluir