Personalizar links do Blogger com estilos CSS

Personalizar pequenas partes do Blogger é uma boa forma de aprender os códigos HTML e CSS. Uma das áreas que os blogueiros mais gostam de dar seus próprios estilos são nos links. Os links precisam estar vísiveis e bonitos para os visitantes clicarem e continuar navegando nas páginas do seu querido blog. Este tutorial destina-se a blogueiros que desejam personalizar os links á sua maneira. Você vai ver que não é nada difícil.

Primeiro você deve encontrar a parte do código do seu template que refere-se aos links. Na maioria das vezes o código está disposto assim:

a:link {
color: #dc760e;
text-decoration: none;
}

a:visited {
color: #dc760e;
text-decoration: none;
}

a:hover {
color: #9e8b29;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}

O código acima é só um exemplo, isso quer dizer que no seu template pode haver algumas (ou várias) diferenças. Primeiro você deve entender o que significa cada linha do código.

a:link, a:visited e a:hover são os seletores. Em a:link nós determinamos como o link deve se apresentar no seu estado normal. Em a:visited nós determinamos como o link deve se apresentar quando ele for visitado, ou seja, clicado. Em a:hover nós determinamos como o link deve se apresentar quando o mouse é passado sobre ele. Este último seletor é o mais divertido de estilizar.

Entre as chaves dos seletores nós inserimos as propriedades e os valores que quisermos, assim personalizaremos os links do blog. A cada propriedade ou valor que inserir, deletar ou modificar visualize o blog para ver como está ficando. Aos poucos você deixará do jeito que quer.

Conhecendo as propriedades

Vamos conhecer as principais propriedades e os valores que podem ser aplicados para estilizar os links. Antes alguns lembretes:

• É preciso fechar cada valor com um ; (ponto e vírgula) para que a propriedade funcione.
• A ordem que você colocará as propriedades não importa. O importante é manter os seletores e as propriedades devidamente fechados com seus respectivos símbolos.
• O valor none pode ser aplicado a qualquer propriedade existente. Este valor desativa a propriedade em que ele foi aplicado. Ou seja, ela não aparecerá no blog, não será visualizada.

text-shadow: 1px 2px 1px #000000;

Esta propriedade dá ao texto do link uma sombra. Os dois primeiros valores referem-se á posição da sombra, sendo que é possível aplicar valores negativos. O terceiro valor é o esfumaçado da sombra, que pode ser 0, obtendo-se assim uma sombra seca, reta. Por último vem o código hexadecimal da cor da sombra.

color: #990050;

Esta propriedade determina a cor do texto do link.

text-transform: capitalize;

Esta propriedade determina uma transformação no texto, não importa como ele foi escrito. Esta transformação pode ser capitalize, onde o texto inteiro fica com as iniciais maiúsculas; poder ser uppercase, onde o texto inteiro fica com letras maiúsculas e pode ser lowercase, onde o texto inteiro fica com letras minúsculas.

text-decoration: underline;

Esta propriedade determina uma decoração simples no texto. Pode ser underline (sublinhado), overline (sobrelinhado), line-trough (riscado) e blink (piscando).

Concluindo

Você pode não decorar todas as propriedades e valores possíveis de primeira, mas é assim mesmo. Você deve ir "brincando" com o código, cada hora determine de um jeito, teste, apague, faça de novo... Assim você aprende o código e consegue sempre personalizar os links do seu blog da maneira como quiser.

Lembro que é possível determinar um estilo diferente para os links de cada elemento do blog. Por exemplo: sidebar, menu horizontal, posts, etc. Você pode fazer os links de cada uma dessas áreas se apresentarem de formas diferentes. Só tome cuidado para não virar canaval.