1 de jul de 2012

Tutorial - 6 Estilos hovers para Links

Heey
Hoje, trouxe um tuto bem simples, e que deixa o blog bem mais fofinho...
É de como personalizar o hover dos links quando voce passa o mouse -.-'
Bom,trouxe varios estilos...
São estes:

1 - Hover Pontilhado
2 - Hover Tracejado
3 - Hover Fade
4 - Hover em Italico
5 - Hover em Negrito
6 - Hover com linha normal
...

Efeito Hover Pontilhado

1. Vá em Design >> Editar HTML >> CTRL + F >> e procure:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
}

Procure por a:link { para simplificar...
Sublinhado é o que vamos editar ;]

Embaixo de
color: $(link.hover.color);
e acima de } cole:

border-bottom: 1px dotted #000000;

Ficando :

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
border-bottom: 1px dotted #000000;
}
Verifique se depois de  text-decoration:none; esta com none e não underline
Aonde esta:  #000000 é a cor dos pontinhos, a cor do link, voce vai personalizar no seu "Personalizar"(no modelo) do blog mesmo, é só ir em Design>>Personalizar>>Avançado>>Links>> e editar la as cores...


...

2 - Efeito hover em Tracejado
1. Vá em Design >> Editar HTML >> CTRL + F >> procure:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
}


Em Sublinhado é o que vamos editar ;]

Embaixo de
color: $(link.hover.color);
e acima de } cole:

border-bottom: 1px dashed #000000;

Ficando :

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
border-bottom: 1px dashed #000000;
}
Verifique se depois de  text-decoration:none; esta com none e não underline
 
Aonde esta:  #000000 é a cor dos traçinhos, a cor do link, voce vai personalizar no seu "Personalizar"(no modelo) do blog mesmo, é só ir em Design>>Personalizar>>Avançado>>Links>> e editar la as cores...


...

3 - Hover em Fade

O que é um Hover Fade? É aquele link que troca de cor lentamente...

Vá em Design >> Editar HTML >> Ctrl + F >> procure por:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Apague e cole:


a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
 Faça as mudanças nele... Lembrando, o código acima, vale apenas para a area dos posts e não para a sidebar... se voce precisar para a sidebar tambem é só me avisar nos comentarios que eu posto aqui ^^

...

Hover em Italico

Vai em design >> Editar HTML >> CTRL + F e procure por:
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
Acima de  } voce vai colar o seguinte código:

font-weight: italic;

ficando:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
font-weight: italic;
}


 Se voce quiser, tirar aquela linha embaixo que tem, é só voce ir ali no código e em vez de underline voce colocar none...

Ficando igual este código debaixo:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
font-weight: italic;
}


... 

Hover em Negrito

Vai em design >> Editar HTML >> CTRL + F e procure por:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
Acima de  } voce vai colar o seguinte código:

font-weight: bold;

ficando:


a:hover {
  text-decoration:none;
  color: $(link.hover.color);
font-weight: bold;
}


 Se voce quiser, tirar aquela linha embaixo que tem, é só voce ir ali no código e em vez de underline voce colocar none...


Ficando igual este código debaixo:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
font-weight: bold;
}


...  


Hover com Linha normal

Bom, este os blogs já vem, mais caso voce tenha editado e quer este efeito de volta, é só deixar este código:

Vá em Design >> Editar HTML >> Ctrl + F >> procure por:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

o underline é a linha em baixo... dai por via das duvidas... voce vai colar isto antes de }

border-bottom: 1px solid #000000;


O código ficara assim:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
border-bottom: 1px solid #000000;
}

...

Bom gente, é só isto... Se alguma coisa deu errado, diga nos comentarios que eu irei concertar...
Bezos
Bruna

 

3 comentários:

  1. Amei o tutorial!
    modalezaa.blogspot.com

    ResponderExcluir
  2. aah naum to conseguindo ! :/
    só consegui o do " Leia Mais. ee adoorei Obriigado *w*

    ResponderExcluir

Seja educado.
Poder pedir postagens, e sugestões são bem vindas
Obrigada e volte sempre