23/07/2012

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
DicaCaso 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.



5 comentários:

  1. Olá! Vim aqui para te convidar a acessar o blog Pink Berry. O blog novo e fofo, que precisa de sua ajuda para crescer! Poderia seguir meu bloguinho também! Smaaack!

    http://blog-pinkberry-oficial.blogspot.com.br/

    ResponderExcluir
  2. adorei seu blog.. é lindo ;) Primeira vez de muitas que estarei visitando ;)

    www.ejhonas.com {Seguindo seu blog para a próxima meta. Se puder seguir o meu o link tá do lado *-*}

    ResponderExcluir
  3. facil tutu e lindo o resultado .

    ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
    http://blog-meninasmalucas.blogspot.com.br/
    ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

    Espero sua visita .

    Bjim fofa

    ResponderExcluir
  4. Heey .. Tudo bom ??
    Gostei do blog ..
    Se puder da uma passadinha lá no blog,e segue táah ? (se puder)

    To seguindo ♥

    http://kawaiifake.blogspot.com.br/

    ResponderExcluir
  5. Ótimo tutorial :)
    www.SweetKawaiiOficial.blogspot.com

    ResponderExcluir

Olá! Obrigada pela sua visita e comentário. Só peço que não venha com palavras de baixo calão!

Agradeço, desde já!♥