Como colocar cursor do mouse no blog personalizado .. !

maio 28, 2014


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

  1. Vou usar no meu blog, super amei! ^^

    ResponderExcluir
  2. Vou por no meu blog são lindos amei valeu ! :)

    ResponderExcluir
  3. Interessante e que bom que vc resolveu compartilhar isso com agente, eu sempre quando entro nos blogs tem os cursores de mouses personalizados .. !

    ResponderExcluir
  4. Eu estou pensando em fazer um, amei essa dica :D

    ResponderExcluir

Like us on Facebook

Flickr Images