Tutorial: Estrelinhas/Bolhas ou Corações Caindo do Mouse


Olá meus amores, como tinha dito para vocês, vou começar a postar alguns tutoriais simples de coisas fofas para dá um up no blog de vocês, espero que todos gostem *-* (Não sou expert no assunto, mas tenho aprendido muitas coisas nesse quase um ano de blog, a cada post, vou deixar o link do site onde aprendi o tutorial - dos que eu lembrar, ou estiver salvo aqui - tudo para vocês, seus lindos), VAMOS LÁ.

Lembrando que você deve fazer um backup do seu template antes de começar a modificar o html, apenas por precaução.
Primeiramente entre no menu do seu blog, vá em editar HTML, clique em CTRL+F ou F3 e procure por </body> e cole o código abaixo ANTES de ''body''.

<script type='text/javascript'>
// <![CDATA[
var colour="#FFD700";
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>

Ok, após fazer isso, você poderá também modificar a cor das estrelinhas, basta procurar por var colour="#FFD700"; Para escolher a cor desejada, basta clicar na Tabela de Cores HTML. Outra modificação bem legal, é a quantidade de estrelinhas que vão cair, para mudar basta procurar por var sparkles=50 E trocar o "50" por um número maior, ou menor. 

Ok, agora existem também outras formas de adicionar Bolhas e Corações saindo do mouse, vamos aprender?
Vá em Layout depois em Adicionar um gadget e escolha o gadget HTML/Java Script, após escolher basta copiar um dos códigos abaixo e salvar.

Código Corações Saindo do Mouse.
<script type='text/javascript'>
// <![CDATA[
var colour=" #666666 ";
var sparkles=40;
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(5, 5);
var rdow=createDiv(5, 5);
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()*5;
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+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Bolhas Caindo do Mouse. 
<script type="text/javascript">
// <![CDATA[
var colours=new Array("#FF69B4", "#FF69B4", "#FF69B4", "#FF69B4", "#FF69B4"); // 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>

Bom gente, por hoje foi só isso, espero que tenha ajudado vocês, principalmente aqueles que haviam me perguntado como fazia esse efeito, semana que vem pretendo trazer outro tutorial desse estilo. Esse tutorial eu aprendi no site: http://www.dicasparablogs.com.br
Como eu disse, não são tutoriais ensinando a criar um template (Afinal não sei rs) mas tenho certeza que vocês, principalmente as meninas, vão gostar dos próximos posts, afinal nós amamos essas frescurinhas, né?

52 comentários:

  1. Olá Kéziah,

    Parabéns pela inciativa, muitas pessoas não desconhecem esses efeitos pra incrementar seu o blog.

    é super fofo!

    Beijos
    Deise^^

    ResponderExcluir
    Respostas
    1. Fofo mesmo, né? Obrigada querida!
      Beijocas

      Excluir
  2. Olá Keziah,
    tudo bem ?
    Adorei a postagem, quem sabe mais pra frente eu faça algo em meu blog.

    Abraços
    Parabéns pelo Blog, ótimo Conteúdo.

    http://www.vibradosemlivros.blogspot.com
    Gabriel Lima!

    ResponderExcluir
    Respostas
    1. Opa, obrigada Gabriel... Precisando de ajuda :D

      Excluir
  3. Amaaamooooos mesmo, frescurinhas é com a gente mesmo!!! kkkk Adorei!

    Beijos,

    Celle
    bestherapy.blogspot.com

    ResponderExcluir
  4. Nossa eu adoro esses efeitos. Acho que eu vou fazer no meu blog!
    Quero mais tutoriais, viu?
    Beijos,
    Yasmin
    deitadosnagrama.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Pode deixar Yasmin, qualquer dúvida me avise *-* Beijocas!

      Excluir
  5. Tutorial muuuito bem explicado :) Gostei muito!

    Beijo
    Mariana | Sem querer me intrometer

    ResponderExcluir
  6. Oiii,
    Eu sou pessima com códigos..hehe.
    Mas eu vou tentar, é tão fofo!!!

    Beijoos!

    ResponderExcluir
    Respostas
    1. hahaha'
      Boa sorte, se precisar de ajuda =)

      Excluir
  7. Oi Kéziah, parabéns pelo tutorial! Tenho certeza que vai ajudar há muitos. E você tem razão, nós adoramos frecuras.

    Beijos

    Fran Borges

    http://poesiasprosasealgomais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Fran *-* semana que vem, mais frescuras rs

      Excluir
  8. Eu acho a ideia excelente...Amo tutoriais, mas os mais simples kkkk Devo confessar: a palavra "editar HTML" me apavoraaa, não mexo com isso nem mortaaaa, vou fazer bobagem na certa rsrsrsrsrs
    Uma pena, fica muito lindo mesmo..mas eu não tenho coragem de tentar, sou horrenda com essas coisas *_*

    Bjinhos marcados
    http://omarcapaginas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Não tem erro Ci, mas se você quiser, depois te ajudo a colocar hahaha'
      Beijocas!

      Excluir
  9. Olá, sou Laura Arvellos dona do blog Garotas Up. Amei seu blog, seguindo!
    Parabéns pela postagem, beijos!

    @larvellos

    TEM NOVA POSTAGEM LÁ NO BLOG SE GOSTAR, SIGA DE VOLTA E COMENTE:
    http://garotas-up.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oi flor, obrigada viu? Vou passar lá sim!

      Excluir
  10. Opa vou tentar aqui, amei as dicas e na verdade não fazia nem ideia de como fazer isso.
    Sério preciso de um manualzinho ahahaha
    Vou ficar super de olho nos tutoriais..
    Beijos
    http://vdsweetlove.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fica de olho sim Naah, são coisinhas bem fáceis de fazer.

      Beijocas!

      Excluir
  11. O meu blog é bem simples... Queria tanto ter talento e criatividade para isso... rsrsrs
    Mas, é ótimo vc passar isso a diate!

    Beijos
    http://plantaoonline.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ah, nem precisa de talento Paola, é bem fácil rs

      Excluir
  12. Achei sua ideia genial Kéziah, eu adoro essas coisinhas fofas, embora eu lute pra não embonecar demais o RR, pois um blog literário não precisa ser muito chamativo. Mas eu sou perua, preciso me policiar mesmo...rsrsrs
    Mas sua ideia foi show, amei e estarei aqui aprendendo a mexer nas coisinhas, pode ter certeza, parabéns pela iniciativa amore.
    Beijão
    Vivi
    Razão e Resenhas

    ResponderExcluir
    Respostas
    1. Obrigada Vivi, fico feliz que tenhas gostado!

      Excluir
  13. Amei o tuto, ficou muito legal, vou tentar fazer depois, mas é melhor seguir seu conselho primeiro e fazer um backup rsrs, não sou nada boa nessas coisas, ficou 10 seu post linda. Beijos.

    http://loucurasedevaneiosbyliza.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É sempre mais seguro Liz *-* haha'
      Feliz que tenhas gostado.

      Beijocas

      Excluir
  14. Olá legal o tutorial mas não posso colocar no meu blog se não eu só iria ficar brincando com o mouse o tempo todo hehe

    bjos

    ResponderExcluir
  15. Essas dicas são super legais, ainda mais para mim que não sei absolutamente NADA de html... você salva a minha vida *-*

    Um selinho do meu blog para o seu *-* http://www.encantoemfolhas.com/2012/11/selo-premio-dardos.html

    ResponderExcluir
    Respostas
    1. Ahh que linda Jaque, é simples, basta prestar atenção *-* Beijocas e obrigada pelo selinho!

      Excluir
  16. Adorei o tutorial Keziah!! Você explicou direitinho e facilitou para quem deseja esses corações/bolhas!

    Beijos,
    http://pitadadecultura.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Gabriela, fica de olho no próximo!

      Excluir
  17. Adooooooro ler tutoriais de html, já que sou uma negação dessa parte D: ahsiudhaiusdhasiudhisuahdiuhas

    Benzitcho, tem um meme pra você lá no meu blog *.* espero que possa respondê-lo. http://linguadoslivros.blogspot.com.br/2012/11/meme-laco-de-incentivo-leitura.html

    Beeeeeeeeeeeeeeijinhos :* <3

    ResponderExcluir
    Respostas
    1. Eu não sou tão bom com html Rafa! hahaha'
      Mas dá pro gasto.
      Obrigada pelo meme *-*

      Beijocas

      Excluir
  18. que lindooooooooooooooooo, adorei...esses corações...fofos...bjs

    ResponderExcluir
  19. Oi Kéziah, só passando para avisar que tem um meme lá no blog que te indiquei para respoder. Passa por lá e confere. Não sei se costuma responder, mas se gostar me avisa depois.

    Beijos

    http://poesiasprosasealgomais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Fran, vou passar lá sim *-* obrigada, beijos

      Excluir
  20. Aii que fofo, roubei pro meuu *-----------*
    bjoo

    http://leitorapaixonada19.blogspot.com.br/

    ResponderExcluir
  21. legal o tutorial que vc tostou sera que vc podia segir o meu blog
    lik
    http://winxepisodiosparabaixart.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. sera que vc pode fazer esse tutorial de como colocar para que as pessoas link me
      como que si fais um link me forvavor poste esse totorial

      Excluir
  22. Acho muito fofo, mas fico distraída tentando fazer desenhos e escrever palavras com as coisinhas caindo... hahaha

    ResponderExcluir
  23. Oie,td bom?
    adorei seu blog,muito legal xD
    vc gostaria de visitar,comentar e seguir meu blog?é sobre o meu mangá que estou criando.
    te espero lá!
    http://gliter-lovely.blogspot.com.br/

    ps. ja estou seguindo vc ^^

    bjooos ♥

    ResponderExcluir
  24. aahh que pena,eu coloquei o código mas não de certo :(

    ResponderExcluir
  25. eu consegui meu blog ficou lindo coloquei corações e mudei a cor dele para vermelho : #FF0000
    visite meu blog : http://jogosstardollestmj.blogspot.com.br/ :)

    ResponderExcluir
  26. FICOU D MAIS VISITE MEU BLOG COM RADIO ONLINE http://maniatekdeser.blogspot.com.br/

    ResponderExcluir
  27. ah que lindos! testei os 3 e fica difícil escolher entre eles! por enquanto estou usando as estrelinhas

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. Obrigada!
    O meu ficou muito bonito...
    Como eu posso colocar o coração com cores?
    Quando eu coloquei ficou preto.

    ResponderExcluir

Sua opinião é de extrema importância.
Sinta-se a vontade para deixar sua sugestão, crítica, dúvida, opinião, etc.
Mas lembre-se, seja educado com seus comentários e dispense palavras de baixo calão, pornografias e qualquer outro tipo de preconceito.
Deixe o link do seu blog ou qualquer outro tipo de contato para que eu possa retribuir sua visita.

Obrigada pela visita, volte sempre que puder.
Beijos!

Fonte: http://princesa-descolada-myla.blogspot.com/2013/03/paginacao-numerada.html#ixzz2j39CpByO