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