domingo, 2 de dezembro de 2012

Como personalizar o cursor do mouse no blog

Um cursor personalizado no blog pode ter um efeito muito interessante e chama muito a atenção do leitor desde que, é claro, seja uma imagem bem criativa e original.

Personalizar o cursor é fácil. Para isso precisaremos de duas imagens: uma do cursor normal e outra do cursor quando estiver sobre um link. Podemos criar as imagens em um programa editor de imagens qualquer mas devemos salvá-las em dois formatos (PNG e CUR), totalizando quatro imagens. A maioria dos programas editores de imagens não suporta a extensão .cur. Para solucionar este pequeno problema podemos utilizar sites que fazem a conversão de imagens on-line, o DigitalCoding.com, por exemplo.

O próximo passo é a hospedagem das imagens. O Google Sites é uma boa opção mas qualquer site de hospedagem de imagens serve.

Procure no código CSS do template do blog por body { e cole o seguinte código logo abaixo, depois de {:

cursor: url('url da imagem normal do cursor com extensão .cur'), url('url da imagem normal do cursor com extensão .png'), auto;


Substitua as partes do código destacadas acima pelos URL's das imagens do cursor.

Agora procure por a:hover { (está um pouco abaixo de body {) e cole o código abaixo depois de {:

cursor: url('url da imagem do cursor sobre um link com extensão .cur'), url('url da imagem do cursor sobre um link com extensão .png'), auto;


Novamente lembre-se de substituir as partes destacadas pelos URL's das imagens do cursor.

As imagens PNG podem ser substituídas por imagens GIF, assim como as imagens CUR podem ser substituídas por imagens ANI.



O autor
Minha foto Juarez Pereira
Unaí - MG, Brasil
Visualizar meu perfil completo

Nenhum comentário :

Postar um comentário