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.
Nenhum comentário :
Postar um comentário