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. 


10 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 such amazing information.This is one of the best sites which provide all the details of related topics.
    Examhelpline.in

    ResponderEliminar
  4. Thanks for sharing such great information. This is one of the best sites which provide all the details of relevance to topics.
    careinfo.in

    ResponderEliminar
  5. Thank you for giving us such kind of information. This is one of the best sites having all the details.
    carebaba.com

    ResponderEliminar
  6. Good description of all the details related to topics which is given thanks for giving this to us.
    Bihar PSC CC Pre Admit Card

    ResponderEliminar
  7. Really you have provided amazing information. Thanks for such kind of best details.
    Examhelpline.in

    ResponderEliminar