Personalizar os links da postagem - confira!

Hoje vocês vão aprender como deixar os links da área da postagem com esse fundo , como está aqui no blog, eu aconselho a usar esse estilo que a fonte dos tais links forem estilo arial , georgia ..etc ou outras que não sejam extravagantes.Vocês poderão tanto usar esse estilo ao passar o mouse no link ou deixar ele no estado normal mesmo , e também poderão aproveitar e retirar o sublinhado caso queiram.

Este tutorial foi realizado no template travel.

Primeiro aconselho que fiquem com uma tabela de cores já disponível assim agiliza o trabalho.Indico esta tabela , bom depois de estar com a tabela disponível , vá em design > editar html do seu blog.

Agora entenda essa explicação básica , foi deixar abaixo dessa explicação , o que você vai procurar para editar os links exemplo : título das postagens , link comentários , tags ..etc , daí em cada um deles terá as seguites linhas :

a:link {  EFEITO DO LINK EM ESTADO NORMAL

  text-decoration:none; 

  color: $(link.color);

}

a:visited {  EFEITO DEPOIS DE CLICADO

  text-decoration:none;

  color: $(link.visited.color);

}

a:hover { EFEITO QUANDO O MOUSE PASSA SOBRE ELE

background-color: #E0EEEE ; 

  text-decoration:underline;

  color: $(link.hover.color);

}

Daí em cada um você vai colocar o efeito que quer , no caso o fundo , para que o link fique com fundo sem o mouse passar nele , na primeira linha a:hover  caso não tenha você adiciona depois de  color: $(link.color); o seguinte:bakcground-color: e aqui o código da cor ;  se já tem não precisa , é só colocar a cor
para retirar o sublinhado dos links
onde estiver underline você coloca none
 pode colocar outros efeitos como :

overline

line-through

blinkonde ter color coloque o código dar cor do texto
estamos entendidos?
ok , então vamos a personalização , EII! calma aê , lembre de NÃO SALVAR NADA sem primeiro visualizar , pra não dar problemas depois, e cá entre nós é bem difícil de dar erro , a menos que você não coloque o código da cor certo , e o feche com ;
Pressione ctrl+f
Para editar o título das postagens :
procure por

h3.post-title a {

e de acordo com a explicação que dei , personalize.
Para editar os links das tags e comentários ( só se eles estiverem abaixo da postagem )
procure por

.post-footer {

Quando encontrar , ele estará mais ou menos assim , ou exatamente como a imagem abaixo:daí você apaga a parte selecionada na imagem acima e coloca o seguindo código abaixo:

 border-top:1px dotted #CCCCCC;
color:#8B7765;
font:Arial 11px georgia;
letter-spacing:1px;
margin:0.75em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#6C7B8B;
text-decoration:none;
background-color:#CAE1FF;
}
.post-footer a:hover{
color:#FFFFFF;
text-decoration:none;
}

Deve ficar assim :
neste código onde tem: border-top: você pode colocar uma borda na parte das reações , neste no caso está em branco , você muda para a cor que sua área da postagem estiver , e logo abaixo tem color: que no caso é a cor do texto das reações .
onde tem .post-footer a{ coloquem a cor do texto e a do background que quiserem , do mesmo jeito em .post-footer a:hover{  que irá aparecer quando o mouse passar no link essas cores ficarão tanto para o link comentários quando para as tags do seu blog , vá sempre visualizando ok ? não apague nada do código para que ele funcione corretamente.


Fonte; TRECHY TEEN