Como colocar bordas abaixo do título da postagem? (Simples)

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 */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/

ou o que desejar acessando este site garanto a você que gosta de bordas, você irá amar♥

3: Você pode colocar uma sombra no fundo acrescentando o código abaixo do h3 {background-color: #FFFFFF ;} 

text-shadow: 1px 2x 1px #FFFFFF

Altere 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

----------------------------------------------- */

Sempre ficará na área das postagens: /* Post ou  /* Posts e geralmente irá vim com algum h3


Visualize! Se deu certo ou ficou como queria hehehe salve.

Para as cores.