19.8.16

Cursor do blog


E aqui está mais um post. Esta coisa é tão básica que nem sei como é que não ensinei mais cedo - basicamente, ensino a personalizar o cursor/mouse do blog, através de 2 tutoriais diferentes e ambos simples, um que pode ser aplicado em qualquer área, e outro que só pode ser aplicado nos hovers dos links. Também trago diversos modelos, assim poupo-vos o esforço de procurar ou criar os vossos, a não ser que não gostem de nenhum dos que eu trouxe >.< Enfim, aqui vai.


Tutorial 1:
Basta colocar a linha seguinte, substituindo a url pelo link da imagem que quiser, ou, se não quiser usar um icon, pode antes usar um dos cursores padrão [daqui]:
cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;
Essa linha pode ser colocada em diversas áreas no HTML do seu blog (após a chaveta/colchete de abertura). Por exemplo:
  • Modificando o cursor do layout todo: coloque na área .body, html { OU .main-inner{
  • No "negrito, itálico, sublinhado e tachado": coloque nas áreas b {, i {, u {, strike { (se não achar isso no HTML do seu blog, OU é porque ainda não [personalizou a área] OU porque no seu blog não tem espaçamento entre o b e a colchete. 
  • Efeitos de imagens, comentários ou áreas específicas. Não vou sugerir nada aqui, porque basicamente dá para colocar o dito código em todo o lado.

Tutorial 2: [créditos]
Este tuto funciona de uma única maneira: o cursor fica ativo apenas quando se passa hover nos links, e é simples de aplicar. Basta colocar num gadget HTML/Javascript:
<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 HOVER"), url("URL DA SUA IMAGEM HOVER"), auto;}</style>
Era isto, espero que tenham gostado. Eu não testei o segundo, mas imagino que funcione. Termino deixando vários icons possíveis, não fui eu que criei o molde, mas redimensionei-os para não serem aqueles icons gigantes. Podem mudar as cores, claro. 


4 comentários:

  1. Amei o tutorial e o blog! to super apaixonada por tudo que tem aqui, seu talento é incrível.

    ResponderEliminar
  2. Nossa continue, tem bastante coisa que eu pego daqui!
    Estou iniciando agora com HTML, sei criar um layout simples mas dá para o gasto :3

    ResponderEliminar
  3. thank you for the information provided, we are waiting for the next info

    ResponderEliminar