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
Hoy amr, sua inscrição foi aceita, ok? Obg por seguir, to seguindo!
ResponderExcluirhttp://petitechemise.blogspot.com