Olá, seja bem-vindo ao blog PhotoScape Edições, o primeiro e mais completo blog sobre PhotoScape! Aqui você irá encontrar tutoriais, materiais para seu PhotoScape, além de muitas dicas e novidades sobre este maravilhovo editor de imagens.
Obrigada pela visita e volte sempre!

29 de jul de 2010

Colocando Cursor com Estrelas Caindo {Blogger}

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:

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.

<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

Créditos a PhotoScape Edições.
Script retirado do site Cursores Girlspt.

127 comentários:

  1. Adorei a dica, meu blog ficou lindo!
    Obrigada!!

    ResponderExcluir
  2. Faz tempo que estava procurando codigo para colocar estrelas saindo curso do mause.fikou d+ meu blog.Obigada.

    ResponderExcluir
  3. ADOREEEEEEEEEEEEIIIIIIIIIIIIIIII COLEGAAAAAAAAAAAAAA
    FIKOU MTO SHOW
    OBRIGADA MESMO VIW
    :*

    ResponderExcluir
  4. cara meu blog ficou lindo!
    obrigada, e coloca mais dicas ensinando a enfeitar o nosso blog? ia ser muito legal!
    beijos.

    ResponderExcluir
  5. Queria saber como muda a imagem que nesse caso esta escrito photoscape edicoes!

    Obrigada por isso e pelas estrelinhas tambem!

    ResponderExcluir
  6. Amei , coloquei no meu blog e ficou lindo .
    Dá uma olhada http://belatosca.blogspot.com/

    ResponderExcluir
  7. Eu conseguir, vlw, ajudou e muito, quem não conseguir fazer é burro, PRONTOFALEI!

    ResponderExcluir
  8. Adorei esse efeito,o meu blog ficou mais lindo ainda!!!
    Obrigada por compartilhar conosco sua criatividade.
    Bjos.

    ResponderExcluir
  9. Noossa, Mt obrigada!!!
    Eu 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/

    ResponderExcluir
  10. amei demais *-*
    meu blog ficou bem mais legal ;D
    obrigada, seu blog é muuito bom! e me ajuda muito.

    ResponderExcluir
  11. Obrigadooooo valeu eu nunca ia saber que teria que ser antes do body valeu mesmo

    ResponderExcluir
  12. Ahhhh ameeei *---*

    Fazia um tempinho que eu tava tentando colocar :D

    Ficou lindo!

    Brigaada xD

    http://happinesshared.blogspot.com/

    ResponderExcluir
  13. minha primeira manifestação por aqui hihi.
    Perfeito, perfeito *-*
    Você podia dar mais dicas pra essas coisas de HTML, eu não entendo nada ç.ç
    PhotoScape Edições ♥

    ResponderExcluir
  14. Muito orbigada Nathi *------*
    Ficou muito lindo !
    Ficou certinho!
    Adoreeei ! (:
    Beeijos =*

    ResponderExcluir
  15. ADOREI! D+ alias seu Blog é D + !

    ResponderExcluir
  16. AAh o blog da gente fica muito lindo ! obrigada mesmo, adoro suas dicas.

    ResponderExcluir
  17. Que bom gostaram gente! Beijos pra vocês ^^

    ResponderExcluir
  18. Own muiito OBG. ontém msm eu tava aq. no Blog. pedindo isso :D Muiito OBG. Melhor Blog. q. Conheço éé EssE aq. :D

    ResponderExcluir
  19. Gente muito obrigada viu, vocês são demais mesmo!
    Jacque eu te respondi lá, nem percebi que foi você quem comentou aqui... Beijooos linda!

    ResponderExcluir
  20. adorei fazia horas que procurava este código brigadão

    ResponderExcluir
  21. Meu blog ficou fofo!! visitem http://superluxuosas.blogspot.com/

    ResponderExcluir
  22. - Adorei, montei um blog recentemente mas com essas estrelinhas, ja esta um show! Valeu!

    ResponderExcluir
  23. Mt perfeito *-*
    Entrem: http://justinbieberforever-jbf.blogspot.com/

    ResponderExcluir
  24. Muito obrigada PS Edições ! Vocês são realmente demais ;)

    ResponderExcluir
  25. massa 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

    ResponderExcluir
  26. Obrigada ajudou muito sempre quis isso, kkkkk

    ResponderExcluir
  27. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH, obrigada *-*, eu tava mt louca procurando como fazer isso *-*, ignore meu comentario em outro tpc daqui nathi (intimidade k .q*-*

    ResponderExcluir
  28. Adorei coloquei no meu blog .
    Ver ai como ficou
    brilho-de-estrela.blogspot.com

    ResponderExcluir
  29. aaah sonho se realizando! AUHAAUH' *-*
    eu smp achei super fofas essas estrelinhas..
    agora eu tenho elas no meu blog! awn *-*
    paarabeens Nathalia! <33

    ResponderExcluir
  30. Oi adorei o script e multo bom mesmo

    ResponderExcluir
  31. isso sim deu certoooooooo........ameiiiii...bjs bjs bjs

    ResponderExcluir
  32. nossa, a teeempos eu tava procuraando isso *_*
    obriigada *O*

    ResponderExcluir
  33. amooo seu blog deu certiiinhoo amei e parabéns pelo blog

    ResponderExcluir
  34. Muiito Boom !!! :D
    Eu 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/

    ResponderExcluir
  35. Gostei da dica e ameei o blog... Acessa o meu??
    HyperDoll.blogspot.com
    Obrigada *-*

    ResponderExcluir
  36. Eu ameiiiiiiiiii! seu blog é o melhoRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR!!!

    ResponderExcluir
  37. gentemmmmmm ficou show com sua dica , brigadinha bjs

    ResponderExcluir
  38. Muito obrigada! Decidi estilizar meu blog e estava procurando por isso!
    Valeu mesmo!!!

    ResponderExcluir
  39. Obrigada
    adorei o blogger parabens!!!

    ResponderExcluir
  40. AMEEEEEEEEEEI MSM. FICO SUPER FOFO NO MEU BLOG. TAVA PROCURANDO A UM TEMPAO E NUNCA CONSEGUI. AGORA TA PRONTO. AJUDO BASTANTEEEE. BJOOS

    ResponderExcluir
  41. UAUUU!!! Meu blog ficou 1000!!! Valeu!!!

    ResponderExcluir
  42. Obrigada, procurei por seculo e nao achei como fazer isso me ajudo bastante amor amei *-*

    ResponderExcluir
  43. ficou lindo! esse blog já me ajdou mto entra awe no meu:
    blogs-time.blogspot.com

    ResponderExcluir
  44. aaaaah eu consegui !!!! *-*
    obrigada, suas dicas salvam minha vida HAHAHA

    ResponderExcluir
  45. Aaaa amei fico muito lindo no meu Blog seu blog é muito bom

    ResponderExcluir
  46. Nossa mto obrigadoo, meu blog ta ficando cada vez melhor *----* www.munyblogcoolthings.blogspot.com

    ResponderExcluir
  47. http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

    Nesse site tem várias cores para vc colocar !

    ResponderExcluir
  48. Obrigada,meesmo . Ficou lindo.
    http://neversay2.blogspot.com/

    ResponderExcluir
  49. AMEI!!!!FINALMENTE CONSEGUI COLOCAR NO MEU BLOG E FICOU D+ !!!!!!!!!!!

    ResponderExcluir
  50. AMEI A DICA
    MUITO D+
    OBG BJOKS =D

    @BempraMente
    @suellenxavier

    ResponderExcluir
  51. OMG! 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 (:

    ResponderExcluir
  52. Demaaaaaaaaaaaaaaais essas dicas!!! AMEEEEEEEEEEEI <3

    ResponderExcluir
  53. Quantos comentários ^^ Obrigada gente, que bom que gostaram e que conseguiram fazer! Bjs ♥

    ResponderExcluir
  54. Adorei!! meu blogger esta lindo.Obrigada beijos.

    ResponderExcluir
  55. nossa fikou lindo as estrelinhas caindo do cursor no meu blog!
    Esse blog é tudo de bom,parabens Nahalia Matos

    ResponderExcluir
  56. Muito obg ameeeeeeeeei, fazia maior tempão que tentava fazer isso. OBG

    ResponderExcluir
  57. Obrigada mesmo, faz maior tempão que estou procurando isso.

    ResponderExcluir
  58. x Ameeeeeeeeeeeeei, emu bloog ficou liiindo.
    Suuper shhooow, obg.

    AH, SEU BLOG É DEEMAIIIS' ((:

    ResponderExcluir
  59. Consegui , obrigado meu blog ficou perfeito !
    Queria isso a muito tempo .

    VALEUUUUUUUU

    ResponderExcluir
  60. Aaa muito Obrigado!
    Adorei o seu Blog!

    ResponderExcluir
  61. Vc brilha menina *-* Muitoo lindo ameei de verdade Obrigadaa sz'

    Bjuus'

    ResponderExcluir
  62. Aiii Valleu Mesmoo Ajudoo Muitoo No meeu blog valleu bjs

    ResponderExcluir
  63. AMEI .................

    AJUDOU E MUITO .

    AGORA TÁ MAS PERFEITO AINDA MEU BLOG !

    AMEII !!

    ResponderExcluir
  64. ameiiiiii meu blog ficou PERFEITOOOO♥

    ResponderExcluir
  65. Ameeeeeeeeeeeeeeeeeeeeeeeeeeeeei muuito...
    Ficou perfect!
    Obrigadaaa, muuuito obrigadaa!

    ResponderExcluir
  66. Muito bom, perfeito, amei.

    Parabéns, que lhe rende bons frutos.

    obrigada,


    Letícia

    ResponderExcluir
  67. Nossa, eu amei essas estrelinhas no meu blog ajudou viu? Continue postando essas máterias incríveis tchau

    ResponderExcluir
  68. =0 moh legal, adorei, ficou perfeito, obrigado=]

    ResponderExcluir
  69. consegui.Ficou lindo.Bom poder contar com você.obrigada

    ResponderExcluir
  70. Nossa adoreiii meu blog ficou muuuuuuuuuuito mais lindo,obg por essa dica bejuu :*

    ResponderExcluir
  71. fico maneiro mto lindjoo *-* , so q eu nn consigo muda a cor da estrelinhas :(

    ResponderExcluir
  72. Obrigada!!! Me ajudou muito! Ficou lindo!

    ResponderExcluir
  73. Aiiinw, tava louca da vida pq não tava conseguindo colocar esse cursor, o blog é super explicadinho e foi bem fácil colocar! Vlw ;D

    ResponderExcluir
  74. Amei!! me ajudou muito , meu blog ficou lindo.
    Bjussssssss

    ResponderExcluir
  75. Obrigado Nathalia , consegui e ficou muito bom . *-*

    ResponderExcluir
  76. SENSACIONAL!OBG NATHALIA!

    PESSOAL VEJAM MEU BLOG!

    http://risosrebelde.blogspot.com.br/

    BJUSSSS!

    ResponderExcluir
  77. Amei

    blog:
    http://sweet-dream-officer.blogspot.com.br/

    ResponderExcluir
  78. Gente deu certo obrigado!
    Visite meu blog é:
    Mattelken.blogspot.com.br

    ResponderExcluir
  79. Gente, eu tenho que atualizar esse tuto né, a plataforma do Blogger mudou toda já "/ Obrigada pelo apoio e comentário de vocês!

    ResponderExcluir