Tutorial:Personalizando os links do blog

Hooy Girls

Hoje vou ensinar a personalizar os links do seu blog, com códigos CSS, ou seja, é no Designer do Modelo, e não no HTML.

Primeiro, abra um bloco de notas, e cole esse código:

a:link {

}

a:visited {

}

a:hover {

}

Entendendo o código acima: 

• a:link é o link antes de ser visitado
• a:visited é o link depois de ser visitado
• a:hover é o link quando o visitante passa o mouse

Certo, perceba que há chaves no código, e é entre elas que você vai colocar os efeitos, como sombra, tipo de destaque (sublinhado, pontilhado), cor das letras e até a fonte só para os link.

Então vou colocar numa lista abaixo, os códigos e suas funções, e vocês vão colar entre as chaves do código dado e mudar as cores, e tal, ok?

Não se esqueçam de colar com o ponto e vírgula, se não os códigos se misturam e não funcionam!

• color: #000000; (cor da letra do link)
• text-decoration: underline; (sublinhado)
• text-decoration: line-through; (linha em cima)
• text-decoration: overline; (sobrelinhado)
• text-decoration: dashed; (pontilhado)
• text-shadow: 2px 3px #000000; (sombra)
• font-family: Arial ; (fonte)

Personalizando os códigos acima:

color: #000000;

Substitua o #000000 pelo código da cor que você quiser. Para ver a tabela de códigos das cores, clike aqui .

text-decoration: underline;

text-decoration: line-through; 
text-decoration: overline; 
text-decoration: dashed;

Não há como personalizar, são só os efeitos. Recomendo que use apenas um para cada tipo de link (podem ser iguais ou não) por que fica exagerado, pontilhado, sublinhado e sobrelinhado, não acham?

text-shadow: 2px 3px #000000;

2px é a distância horizontal da letra. Altere como quiser.

3px é a distância vertical da letra. Altere como quiser.

#000000 é a cor da sombra. Substitua pelo código da cor que você quer. Para ver a tabela de códigos das cores, clike aqui .

font-family: Arial ;

Arial é a fonte usada nos tipos de link (visited, hover). Não recomendo que use esse código, de verdade, é melhor que seja a mesma fonte de todo o blog. Mas é só substituir "Arial" pelo nome da fonte que você quer, e ela não precisa estar no registro do blogger, nem instalada em seu computador.

Agora que já sabe como funciona, vá colando os efeitos que desejar dentro das respectivas chaves de acordo com o tipo de link (visited, hover, link) e personalizando como quiser no bloco de notas.

Depois, com o código pronto, copie-o inteiro. Vá em "Design" >> "Designer do Modelo" >> "Avançado" >> "Adicionar código CSS" cole e salve. Se você usa o Blogger em rascunho (in draft), vá em "Modelo" >> Personalizar >> "Avançado" >> "Adicionar código CSS" cole e salve também.

Beijos,Fiquem com Deus