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. AAh o blog da gente fica muito lindo ! obrigada mesmo, adoro suas dicas.

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

    ResponderExcluir
  17. 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
  18. 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
  19. adorei fazia horas que procurava este código brigadão

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

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

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

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

    ResponderExcluir
  24. 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
  25. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH, obrigada *-*, eu tava mt louca procurando como fazer isso *-*, ignore meu comentario em outro tpc daqui nathi (intimidade k .q*-*

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

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

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

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

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

    ResponderExcluir
  31. 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
  32. Gostei da dica e ameei o blog... Acessa o meu??
    HyperDoll.blogspot.com
    Obrigada *-*

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

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

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

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

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

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

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

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

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

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

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

    Nesse site tem várias cores para vc colocar !

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

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

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

    @BempraMente
    @suellenxavier

    ResponderExcluir
  47. muito obrigado!!!
    adorei!!!
    blog muito bom

    ResponderExcluir
  48. 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
  49. Demaaaaaaaaaaaaaaais essas dicas!!! AMEEEEEEEEEEEI <3

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

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

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

    ResponderExcluir
  53. ameii, otimoo, adoreiii

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

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

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

    AH, SEU BLOG É DEEMAIIIS' ((:

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

    VALEUUUUUUUU

    ResponderExcluir
  58. valeu a ajuda ficou muitoloco.

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

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

    Bjuus'

    ResponderExcluir
  61. Nossa,voocê ajudou muito eu adoreii♥

    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. Ameeeeeeeeeeeeeeeeeeeeeeeeeeeeei muuito...
    Ficou perfect!
    Obrigadaaa, muuuito obrigadaa!

    ResponderExcluir
  65. Muito bom, perfeito, amei.

    Parabéns, que lhe rende bons frutos.

    obrigada,


    Letícia

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

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

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

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

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

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

    ResponderExcluir
  72. 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
  73. Amei!! me ajudou muito , meu blog ficou lindo.
    Bjussssssss

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

    ResponderExcluir
  75. SENSACIONAL!OBG NATHALIA!

    PESSOAL VEJAM MEU BLOG!

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

    BJUSSSS!

    ResponderExcluir
  76. Amei

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

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

    ResponderExcluir
  78. 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