[Blogger - Customização] - Mudando o cursor do mouse para uma imagem no Blogger

No artigo anterior após mostrar como colocar um efeito de estrelinhas saindo da ponta do mouse, eu fiquei me perguntando o que mais seria possível fazer para customizar o cursor do mouse no blog. E foi ai que pesquisando, eu descobri como trocar o cursor padrão do mouse por uma imagem. Você pode ver um exemplo dessa técnica em funcionamento no nosso blog de testes. Repare que eu criei um cursor com o logotipo do blog, e você poderá fazer o mesmo ou usar qualquer outra imagem que você queira.


INFORMAÇÃO: o cursor aparece em 99% do blog, porém, ele poderá não aparecer quando os leitores passarem o mouse por cima de alguns elementos criados com javascript, como é o caso de alguns anúncios do Google Adsense, formulário de comentários, gadget de Seguidores etc.

Trocando o cursor do mouse por uma imagem 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.

]]></b:skin>

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

/* ----- Trocar cursor do mouse por uma imagem ----- */

body, a:link, a:visited, a:hover, a:active, form, input {
cursor: url(link-da-imagem-do-cursor), auto;
}


4. Substitua a parte que foi destacada em vermelho, pelo link da imagem que você quer usar como cursor.

5. Para finalizar, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, seu novo cursor já deverá estar instalado no seu blog, visite-o para ter certeza de que tudo 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.

Atualização — 21.04.2012 às 00h40
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 10 comentários neste artigo!

  1. Opa, boa dica essa. Mas tentei colocar uma imagem seguindo o cursos que funcionou super bem no Mozilla, mas no Chrome, por alguma razão ela não só não seguia o mouse como não aparecia. Vi ali em cima "Fazer cirurgia no olho" riscado. Vc tá bem??

    Vlw!

    ResponderExcluir
  2. Sybylla: acho que não entendi direito o seu comentário; seguindo este tutorial o cursor não apareceu no Google Chrome, ou seguindo outro tutorial? Eu testei este artigo nos navegadores: Mozilla Firefox, Internet Explorer, Google Chrome e Opera, e ele só não funcionou no IE e no Opera.

    Quanto à cirurgia, estou bem sim, foi algo simples e já removi o curativo. Obrigado por perguntar! (:

    Agradeço as visitas e os comentários! Volte sempre.

    ResponderExcluir
  3. Ah, que bom!

    Então, é que eu tentei por uma imagem seguindo o cursor (acho que me expressei mal, sorry). No Mozilla funcionou mas no Chrome ela sumiu, ficou muito estranho. Aí desisti de customizar o cursor, acho que assim, básico é melhor...

    ResponderExcluir
  4. Sybylla: entendi, eu já vi alguns artigos falando sobre imagens “seguindo” o cursor, mas nunca testei não. Creio que esse efeito de seguir seja feito com javascript, mas no caso deste artigo é apenas CSS. Também prefiro o cursor básico, mas sempre tem alguém que gosta de adicionar esses tipos de “efeito” nos blogs!

    ResponderExcluir
  5. Obrigada, pois foi o único tuto que funcionou ^_^

    ResponderExcluir
  6. nao deu estava assim erro htmail5

    ResponderExcluir
    Respostas
    1. Olá Juh, o problema aparece no momento de salvar? Se sim, informe em qual blog você está tendo problemas, e o navegador que você usa.

      Excluir
  7. aonde eu axo esse link do curso?
    pfv me responde estou desesperada

    ResponderExcluir
    Respostas
    1. Olá Aline, a parte "link-da-imagem-do-cursor", deve ser substituída pelo link da imagem que você quer usar como cursor. Por exemplo, busque no Google, ou qualquer outro lugar, uma imagem que você queira usar como cursor, depois clique com o botão direito do mouse sobre essa imagem e escolha a opção "Copiar URL da imagem" ou "Copiar link/endereço da imagem" (depende do navegador que você usa), depois disso é só você apagar a frase "link-da-imagem-do-cursor", e colar no lugar o link da imagem que você acabou de copiar. Depois disso é só salvar. Espero que isso ajude, qualquer dúvida comente novamente!

      Excluir