Como colocar cursor do mouse no blog personalizado

Amores eu trago mais um tutorial, vou explicar como personalizar ou mudar o curso do mouse do seu blog, vocês vão ver como é super fác...


Amores eu trago mais um tutorial, vou explicar como personalizar ou mudar o curso do mouse do seu blog, vocês vão ver como é super fácil e rápido. Antes de mais nada esse tutorial foi testado, eu usava o cursor personalizado no meu antigo blog. Eu trouxe o tutorial em duas formas a primeira "Adicionando um Widget" e a segunda adicionando diretamente no HTML do designe do seu blog. Vamos aprender?!

1° Modo: Vá para o seu Blogger e clique em Layout >  Adicionar um Widget > HTML/JavaScript.
No espaço em branco cole o seguinte código:

<style>HTML,BODY{cursor: url("URL DA IMAGEM"), auto;}</style>  


Onde esta escrito "url da imagem" cole o link da imagem do cursor que você deseja. 2° Modo: Acrescentando diretamente no html do designe do seu blog.

Agora vá no painel do seu Blogger > Designer > Editar HTMl  e aperte Ctrl+F e pesquise <head>, cole o código abaixo depois da tag encontrada.

<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-11/cur1089.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-pointer.html" target="_blank" title="S Pink Premium Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="S Pink Premium Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Depois exclua do código acima, toda a parte que fica depois de </style>

<a href="http://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-pointer.html" target="_blank" title="S Pink Premium Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="S Pink Premium Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>


Agora, aperte Ctrl+F e pesquise </head>, cole o código do cursor antes da tag encontrada e da mesma exclua toda a parte que fica depois de </style>

No site http://www.cursors-4u.com/ tem vários modelos de cursores de mouse clique em cima do seu preferido e cole o código que será gerado.

Uma dica: Se você quiser usar um cursor personalizado do site que eu citei acima, mas não quer acrescenta-lo diretamente no HTML do seu template então é, só você copiar  o url da imagem do cursor do código gerado.

O código gerado do site http://www.cursors-4u.com/, é:

<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-11/cur1089.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-pointer.html" target="_blank" title="S Pink Premium Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="S Pink Premium Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

A Url da imagem é toda essa parte que está entre cursor: url( e ), progress !important;

http://ani.cursors-4u.net/cursors/cur-11/cur1089.cur


Você copia e acrescenta no código do html do 1° modo. Se tiverem dúvidas é, só perguntar que eu respondo, beijos de luz a todos!

You Might Also Like

8 comentários