Quem visita o Phanny Teen há um tempo viu que utilizo. Desde então, já deve ter uma noção do que estou falando. Quem não tem, confira o restante do tutorial. Irei mostrar uma das maneiras mais simples que conheço e que já vi para a realização desse tutorial. Peço ao interessado que antes de segui passo a passo, faça um backup (salve o modelo completo) do seu blogger caso dê erros, você terá o original.
Modelo >> Editar Html >> pressione as teclas Ctrl+F procure por:
/*Post
ou
/*Posts
Qualquer um desses. Depende muito do modelo que você utiliza.
Irei utilizar o meu código que é:
/* Post
----------------------------------------------- */
ou
.post h3 {
pressionando o Ctrl+F localize a primeira linha do código seguinte:
.post h3 {
color:#000000;
border-bottom:1px dashed #26B8CC;
font-size:22px;
font-weight:normal;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
}
e abaixo de color:#000000 cole este código:
border-bottom:1px dashed #26B8CC;
ficando assim:
.post h3 {
color:#000000;
border-bottom:1px dashed #26B8CC;
font-size:22px;
font-weight:normal;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
}
substitua o que está marcado de vermelho pela cor que quiser
Visualize, se deu certo, salve.
Para as cores
Ou se preferir, use esse o código que irei passar a vocês a seguir. Além de pôr a borda abaixo do título da postagem, tem o fundo colorido. Vale lembrar que ele foi testado no modelo travel do blogspot.
Modelo > editar html > pressione Ctrl+F e procure por
/* Posts
----------------------------------------------- */
apague as seguintes 3 linhas abaixo e coloque este código:
h3 {background-color: #FFFFFF ;}
h3.post-title {
margin-top: -1px;}
h3.post-title a {
font: $(post.title.font);
color: #FFFFFF;}
h3.post-title a:hover {
text-decoration: none;
text-shadow: 1px 2px 1px #FFFFFF;
}
Algumas observações no que está marcado:
1:
- h3 {background-color: #FFFFFF ;} - cor do fundo do título;
- color: #FFFFFF;} - cor do título do post;
- text-shadow: 1px 2px 1px #FFFFFF; - cor da sombra como efeito hover;
- text-shadow: 1px 2px 1px é a medida em px da sombra;
2: Você pode arredondar o fundo acrescentando o código abaixo no primeiro h3 {background-color: #FFFFFF ;} (:
-moz-border-radius: 10px; /* Para Firefox */ou o que desejar acessando este site garanto a você que gosta de bordas, você irá amar♥
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
3: Você pode colocar uma sombra no fundo acrescentando o código abaixo do h3 {background-color: #FFFFFF ;}
text-shadow: 1px 2x 1px #FFFFFFAltere o que está marcado de:
roxo: valor da sombra
rosa: cor da sombra
Dica: Caso não funcione procure por tipos de códigos de títulos de postagens.
Exemplos :
.post { (base para encontrar)
.post h3 {
h3.post-title {
h3.post-title a { (base para encontrar)
h3.post-title a:hover { (base para encontrar)
/* Posts
----------------------------------------------- */
Visualize! Se deu certo ou ficou como queria hehehe salve.
Para as cores.