Cursores e tutorial :3

Oie...No post anterior acrescentei algumas imagens que eu havia salvo em meu computador de wallpapers lolita porque ontem não consegui postá-las por estar com a conexão ruim.
Bem, mas vamos ao post de hoje...
Finalmente eu consegui HAHAHA!
Compartilho com vcs minha primeira tentativa em converter gifs em cursores; eles perdem o movimento de gifs, mas é minha primeira tentativa neh...
Ai eu tô tão feliz!!!!.............................¬_¬

Devo essa descoberta a Iana Paulinha que compartilhou isso com a gente e à Annyz, que, por meio da observação dos códigos dos cursores dela, minha ficha caiu e eu consegui entender como se faz rsrsrs...
É muito simples gente: basta trocar a URL da imagem pela URL da imagem que vc desejar ser um cursor.
Esse código aqui:
<style type="text/css">
HTML,BODY{cursor: url("URL DA SUA IMAGEM"), url("URL DA SUA IMAGEM"), auto;} A:hover{cursor: url(";URL DA SUA IMAGEM"), url("URL DA SUA IMAGEM"), auto;}
</style></div>
...além de substituir a imagem do cursor normal, vc pode especificar como ele fica quando está em cima de um link nos dois últimos lugares para colocar a URL; acho legal ficar com a mesma imagem para vc colocar nos links o efeito arco-íris, igual ao que está aqui no blog, em que o link fica de várias cores quando vc coloca o mouse em cima dele. Para o efeito arco-íris, vá em Design, Elementos da Página, Adicionar Gadget, Html/Javascript e cole isto:
<script src='http://kawaiiicode.github.io/arcoiris.js' type='text/javascript'/>
Já esse código para cursor aqui:
<style type="text/css">body {cursor:url("URL DA SUA IMAGEM"),default}</style>
... o cursor fica em forma da mãozinha branca quando está em cima de um link.
E agora, meus primeiros cursores (um pequeno passo para o homem e um grande passo para a humanidade!) o.o:
**Observaçãozinha: Quando aparecer código 1 e código 2 em um cursor, saiba que o código 1 faz com que apareça apenas o gif, até mesmo quando o cursor estiver em cima de alguns links; o código 2, quando o cursor parar em cima de um link ele transformará em uma mãozinha branca normal, ok? 
Para usar: Basta copiar o código daquele que vc mais gostou e ir em Design, Elementos da Página, Adicionar Gadget, Html/Javascript e colar; visualize depois.




Photobucket

<style type="text/css">
body{cursor:url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/lolipo.gif"),default}
</style>


Photobucket

<style type="text/css">body {cursor:url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/litlle.gif"),default}</style>



Photobucket

<style type="text/css">body {cursor:url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/kuromi.gif"),default}</style>



Photobucket

Código 1:

<style type='text/css'>HTML,BODY{cursor: url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/cursorcandy.gif"), url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/cursorcandy.gif"), auto;} A:hover{cursor: url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/cursorcandy.gif"), url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/cursorcandy.gif"), auto;}</style>

Código 2:

<style type="text/css">body {cursor:url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/cursorcandy.gif"),default}</style>


Photobucket

Código 1:

<style type='text/css'>HTML,BODY{cursor: url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif"), url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif"), auto;} A:hover{cursor: url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif"), url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif"), auto;}</style>

Código2:

<style type="text/css">body {cursor:url("http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif"),default}</style>


Espero que vcs gostem e que me dêem a opinião de vcs para que eu possa melhorar ok ^^ Beijus...







Postar um comentário

9 Comentários

  1. Oiie *--*

    Gosto muito do seu blog, então pensei nele para dar continuidade ao '' desafio '' de blogs que estou participando, aceita ??
    passa lá e confere ;*

    http://out-of-orbit.blogspot.com/

    ResponderExcluir
  2. Oi! Vim convidar você para conhecer meus blogs
    http://palavras-e-sentimentos.blogspot.com
    http://junglegirl-na-janela-secreta.blogspot.com
    Se gostar pode seguir, ficarei feliz em vê vc por lá :)

    ResponderExcluir
  3. eu amei seu blog e ja pus o site do seu blog no meu blog :3

    ResponderExcluir
  4. Obrigada!!! Beijus <3

    ResponderExcluir
  5. Oi faz um tutorial de como personalizar a caixinha onde põe os códigos das post.xau

    ResponderExcluir
  6. Anônimo06 junho

    Amei o tuto e os cursores também!
    Já to usando um desses!
    Muito obrigada :$
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  7. Eu não consigo deixa que quando clica em um link tem uma mão branca :( me ajuda?

    ResponderExcluir
    Respostas
    1. Só colocar a URL da imagem da mãozinha branca naquele primeiro código em a:hover{cursor...

      Excluir
  8. dá para usar um certo tipo de cursor para cada requerimento? tipo, ao clicar em uma foto tem um certo tipo de cursor, em um vídeo outro, em uma aba um certo cursor e assim vai? tipo, um cursor para cada requerimento?

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up