Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

06/10/2011

Cursor do Mouse personalizado

Por pouco eu não posto nada hoje, mas me lembrei de uma dica super simples que qualquer um pode fazer... Mas antes gostaria de agradecer aos mais de 15.000 acessos no DSM, obrigada a todos que passam ou passaram por aqui!!!
O código é bem simples, eu já vi uma penca de blogs que tem, mas não vai funcionar em todos os navegadores (eu sei que no Firefox funciona, no IE não funciona, nos outros não faço ideia) se você não está visualizando um mouse diferente aqui no DSM significa que não vai funcionar no seu navegador. Se está vendo, vai em frente é só seguir os passos, mas preste muita atenção pra não errar!!! De preferência, experimente antes em um blog de testes ou faça Backup do seu Template.

1º Passo - Escolher a imagem:

A imagem vai à gosto, é claro, mais vale lembrar algumas dicas básicas para você não errar na hora de escolher a imagem.
Escolha sempre imagens pequenas, de preferência com formato já com uma setinha ou que lembre um cursor.
Use sempre imagens com fundo transparente, senão vai ficar muito estranho. O melhor formato para transparência é o ".pgn", mas você também pode usar o ".gif".

2º Passo - Hospedar a imagem:

Para saber como hospedar uma imagem clique aqui. Caso a imagem já esteja em algum lugar na net, é só você copiar o endereço dela (clique com botão direito, no Firefox, e clique em "Copiar endereço da imagem". No Explorer, se eu não me engano, clique com o botão direito, depois "propriedades" e ache o endereço na tela que abrir (não tenho muita certeza, não uso o IE há muito tempo)). Nunca hospede a imagem no próprio blogspot, ou ela vai ficar sem a transparência.

4ºPasso - Colocar o código:

Vá no Designer do Modelo, que fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia) > Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes". Aqui nós vamos colar o seguinte código:

body {cursor: url('URL_DA_IMAGEM'), url('URL_DA_IMAGEM'), auto;}

No lugar de URL_DA_IMAGEM, cole o endereço da sua imagem já hospedada. É importante que seja entre os parênteses , que tenha o http:// e que tenha os apóstrofos ('), cuidado para não apagar nenhum desses caracteres!!!
O mouse não vai aparecer na visualização. Então clique em "Aplicar ao Blog", depois vá normalmente no seu blog para ver se mudou o cursor.

Se você mexe no HTML do seu template, basta acrescentar o código entre colchetes em body {  

Se você ainda tem dúvidas sobre o assunto, deixe um comentário!!!

Mil Sweetkisses,
26 Comentários
Comentários

26 comentários:

  1. Bela dica... eu mudei meu cursor duas vezes e estou com um que eu mesma fiz e estou pra mudar... amei o seu cursor é linduxo demais, é bom né dá aquele iten especiall ao nosso Blog!! Beijuuuus
    Ahhhh... já tem 3 dias que não consigo fazer postagem no meu outro Blog, eu faço a postagem e na hora de colocar imagem não vai, trava tudo e tenho que fechar o navegador, quando volto o Blog nem ao menos salvou a postagem... vou enviar uma reclamação ao Blogger... o coisa viu!! Rsrsrsrs... Agora eu vou... Bjs

    ResponderExcluir
  2. Adorei a dica e já vou colocar no meu bloguinho!!!
    http://pensaseeufosserica.blogspot.com/

    ResponderExcluir
  3. ah prefiro meu mouse normal rs

    Se quiser me segue fro...

    www.ohlouka.blogspot.com

    bjim de glitter

    ResponderExcluir
  4. Sheilaaaa :)
    Já coloquei seu banner lá blog! Obrigada por aceitar a parceria, você é muito simpática!

    Um beijo! =*
    @sorvetedecupu
    http://sorvetedecupu.blogspot.com/

    ResponderExcluir
  5. Hum adorei a dica viu... brigada
    Beijo
    http://marifriend.blogspot.com/
    @Storiesandadvic

    ResponderExcluir
  6. oiee flor obg pelo selo!
    bjss
    http://ohmygood-omg.blogspot.com/ http://avidademalu.blogspot.com http://designdesenhos.blogspot.com­ ­

    ResponderExcluir
  7. Olá! Eu gostei do seu blog. Pode seguir o meu?
    sanduichedeassunto.blogspot.com. Fico grata! =)

    ResponderExcluir
  8. adorei sua dica =)

    meninapokebola.blogspot.com

    ResponderExcluir
  9. Hooy Guria, Brigada pelo carinho! seu Blog é muito fofo A M E I o selinho

    Beeeijos

    ResponderExcluir
  10. Adorei o blog e amei de paixão o post sobre o que NÃO fazer em um blog! Acho que faço tudo direitinho... rsrsrss
    Respeitar e ter consideração com os leitores é essencial! Tem gente que esquece que há uma pessoa atrás do PC. #Triste.

    Tô te seguindo, e se quiser conhecer meu blog e seguir o Link é este: http://www.natybeauty.blogspot.com/

    Beijinhos!

    ResponderExcluir
  11. Ótima dica!

    necessidades-femininas.blogspot.com

    ResponderExcluir
  12. Olá!
    Vim conhecer seu blog e já estou seguindo!
    Me segue também?
    Mil beijos!!!!
    www.75dias75looks.blogspot.com

    ResponderExcluir
  13. Adorei a dica, e amei o blog !
    Obrigada por seguir o meu ! Seguindo de volta ! Beijos

    http://papinhodegarota.blogspot.com/

    ResponderExcluir
  14. muito legal gostei!!

    bjokas
    diamantesechocolate.blogspot.com

    ResponderExcluir
  15. Oiii... obrigada pelo selinhoo!!

    Já estou super seguindo aqui..

    Um beeijoo.

    http://maryhitner.blogspot.com/
    @maryhitner

    ResponderExcluir
  16. Muito bom, adorei a dica, mas não gosto muito de cursores diferentes, só se forem bem discretos.
    Beijos fofa e obrigado pelos elogios!
    blogloucamistura.blogspot.com

    ResponderExcluir
  17. eu estava procurando por isso hj!
    tem tb um site que dá cursores personalizados pro blog,so esqueci o link :(
    Não sabia que dava pra colocar uma img nossa.

    ResponderExcluir
  18. Adorei seu bloguinho e ja estou seguiindo !! :D

    Beiijinhos linda :*
    http://estacaofofa.blogspot.com

    ResponderExcluir
  19. Que dica otima...vou tentar seguir!!!

    Bjinhus
    http://blogalicias.blogspot.com/

    ResponderExcluir
  20. Olá, parabéns pelo seu blog! Venho aqui para divulgar a Boutique Vintage, lá você vai encontrar muitas coisas estilosas, diferenciadas, modernas, retrógrada, Entre e confira!

    Loja Online: http://boutiquevintage.tanlup.com

    ResponderExcluir
  21. Adorei a dica Sheila!
    Seu blog tá de parabéns!
    Seguindo já, aguardo sua visita no meu tá!
    Bjossss

    www.superconectadas.com

    ResponderExcluir
  22. Hum... Eu queria um escrito rebelde alguem pode fazer pra mim? Meu blog é www.rebeldesmoc.blogspot.com
    Obrigada!!

    ResponderExcluir
  23. oiii.
    vc está de parabéns pelo seu trabalho de nos ajudar no seu blog!!
    gostaria q você seguir o meu, por favor
    estou no começo, pois não tenho tempo em mexer então não ligue a feiura
    o meu blog é :
    http://cheia-de-charme-mari.blogspot.com.br/

    ResponderExcluir
  24. - aah , achei lindo ^^
    Meninas , me sigam no meu blog por favor , estou começando agora e preciso de uma forcinha . *---* - eu posso seguir todas de volta .
    imaginacao-querida.blogspot.com

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados