Personalizar os links da postagem

A um bom tempo eu não posto nos dias certos, então vou ver se consigo abolir essa agenda maluca que nós temos aqui no Bubblegum! Bom o tutorial que vou ensinar hoje vocês vão aprender como deixar os links da área da postagem com esse fundo colorido, como está aqui no blog, eu aconselho a usar esse estilo que a fonte dos tais links forem estilo arial , georgia ..etc As outras correm o risco de ficar muito estranhas e o efeito fica mais legal masmo com essas fontes padrão. 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. Atenção o tuto é meio longo, mas se prestar atenção ele fica mais rápido de fazer!

Este tutorial foi testado no template travel (o mais aconselhável a usar)

Deixem uma tabela de cores aberta(clique aqui)

Agora sim: 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ê bota o efeito que quiserno 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

blink

onde ter color coloque o código dar cor do texto

estamos entendidos?

ok , então vamos a personalização , Ô! calma aê , lembre de NÃO SALVAR NADA sem primeiro visualizar , pra não dar problemas depois, e é bem difícil de dar erro, a menos que você não coloque o código da cor certo , e o feche com ;






OK, AGORA 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.


Devidos créditos: TT