Big Tutorial: Criando um layout estilo revista #04

Bom gente chegamos até o terceiro passo e agora vamos para o quarto passo... Bom é só acompanhar com atenção que você vai conseguir...
4. Posts
Bom, os posts do estilo revista como todos sabem são tipo uma caixinha pequena separadas, não é? Bom, tenho dois estilos dessas caixinhas que aprendi num site, que vou ensinar á vocês...

1° Estilo: é mais ou menos um em baixo do outro, a largura é normal, só muda a altura. O link do site que tem esse tutorial é esse: link estilo 1

2° Estilo: é dividido e resumido, no mesmo tamanho e lado a lado. O link do site que tem esse tutorial é esse: link estilo 2
Bom depois de feito, ele vai ficar assim apenas na página inicial, quando clicar para ver o post, vai ficar despersonalizado então vamos personalizar?

Primeiro entre no HTML do seu blog (sempre no seu blog de testes) e vai procurar por: h3.post-title {

LEGENDA: Nesse código você vai personalizar a cor do título do post depois que clicar (não é o da pagina inicial, é depois de clicado), a fonte, o tamanho da fonte, vai colocar efeitos, bordas e etc..

Eu uso esse padrão para personalizar o do meu:

h3.post-title {

  margin-top: 3px;
  color: #000; /* codigo da cor */
  font-family: 'oswald'  ; /* nome da fonte */
  font-size: 28px; /* tamanho da fonte em pixels */
  border-bottom: 1px dashed #000;  /*borda em baixo do titulo */
}

Se quiser usar o código assim, você só terá que excluir o código que está aqui em baixo, e colar o de cima no lugar dele..

h3.post-title {
  margin-top: 20px;
}

E salve! Veja como ficou...

Dicas Extras: Para o footer das postagens ficar legal, eu recomendo esse tutorial aqui. E para as imagens ficarem certinha, recomendo esse tutorial aqui.


Bom por hoje é só, aguardem o próximo passo...
Beijos!

5 comentários

  1. Oii,
    faz tempo que não aparecia por aqui, adorei o blog novo, ficou muito massa Debora.
    Vou mudar o antigo no "Blogs Parceiros" no meu blog.
    Bjos

    ResponderExcluir
  2. Adorei as dicas e o blog tb!!

    bjs Má
    www.2betrend.com.br

    ResponderExcluir
  3. Gostei, depois eu tento em meu blog de testes *-*
    http://alguem-escreveu-coisas.blogspot.com.br/

    ResponderExcluir
  4. Vou mudar o lay do me blog em breve e quero testar esses códigos!
    Beijão, Ana do dia

    ResponderExcluir
  5. Bem legal, só que prefiro normal rs.

    Beijos, Ru.

    ruanablog.blogspot.com.br

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN