Personalizando a postagem do blog

Este tutorial vai ensinar como personalizar o local da postagem, a saber: data, titulo, texto, autor da postagem, imagem, legenda da imagem, rodapé, link para os comentários e texto do link da página de postagem (continue lendo). 

Muitas vezes o CSS esta 'escondido' dentro do template, caso esteja basta clicar em ►<b:skin>...</b:skin> para que você possa visualizar CSS e editar. 

Vou ensinar nesta primeira parte como editar a data, título, autor, foto, legenda e texto da postagem. É necessário que você apague os códigos antigos que estão no CSS do seu template. Antes de realizar qualquer modificação faça o backup do seu template.

/*-- data / título / autor / foto / legenda / caixa e texto da postagem  --*/
/*-- data --*/
.date-header {position: absolute; background: url(link); color: #a2a2a2;
font-weight: 400; font-family: georgia;  font-size:25px; font-style: italic;
margin: -8px 0 0 -5px; line-height: normal; text-align: center;
padding: 11px 8px; float: left; width:90px; height:60px;}

/*-- título --*/
.post h3 { display:block; text-decoration:none; text-indent:4px; color: #68546b; 
font-weight:normal; font-family: georgia;font-style: italic; font-size:22px;
line-height:30px; padding: 6px;  margin-left: 100px; margin-top: 0px; 
margin-bottom: 4px; text-align: left; width: 620px;}
.post h3 a {color: #767676;}
.post h3 a:hover {color: #929292;}

/*-- autor --*/
.autor-info {margin:0px 0 10px;}
.post-author {color:#939393; font-size: 12px; font-weight: normal; margin-left: 110px; font-family: georgia; letter-spacing: 1px; float: left; font-style: italic; margin-top: -14px; padding-bottom: 13px}
.post-author a {color:#654769;} .post-author a:hover{color:#9c9c9c;}

/*-- foto --*/
.post img {max-width: 645px;float:center; margin: 0 auto; margin-left: -21px; margin-top: -3px}

/*-- legenda da foto --*/
.tr-caption {position:absolute; margin-top: -36px;  margin-left: -7px; padding: 4px; text-shadow: 0px 1px 0px #000; opacity: .5;font-size:11px; font-family:calibri;font-size: 11px; color: #fff; background-color: #333;  }

/*-- caixa e texto da postagem --*/
.post-body {  margin:0 0 .75em; color:#636363; width: 613px; margin-left:6px; font-family:arial;  font-size:15px; line-height:24px; text-align:  justify ; padding: 4px; }


Como eu falei antes, é preciso apagar o código antigo para colocar o novo, estes estão depois da tag </head>. Para que a foto da postagem fique igual a da imagem, é necessário que seu tamanho (max-width: 645px) seja maior que o tamanho da caixa (width: 631px) na div .post-body.

Nesta segunda parte vamos personalizar a citação, o texto do link da página de postagem (continue lendo), o rodapé da postagem e o link dos comentáriosAntes de realizar qualquer modificação faça o backup do seu template.
/*-- citação --*/
.post-body blockquote {background:#f2f2f2; margin:0 ; margin-left: -6px; padding:10px; font-size: 18px; line-height:24px; color:#000; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; }

/*-- Continue lendo --*/
.jump-link  {margin: 10px;  padding: 2px; font-size: 20px;line-height:22px;font-weight: 300; font-family: 'Open Sans Condensed', sans-serif; width: 120px;}
.jump-link a{ color: #76537b} .jump-link a:hover{ color: #8e8e8e}

/*-- footer da postagem --*/
.post-footer { background: #fff; margin-top: 10px ; margin: .1px;  padding: 6px;  color: #7b7b7b; letter-spacing:.1px;  line-height: 1.4em; text-align: left; margin-left: 0px; font-size: 12px;  font-family: georgia; height: 120px; font-style: italic; text-indent:5px; width:610px ;}

/*-- link dos comentários --*/
.comment-link {float: right; width: 155px;  height:20px; padding: 20px 2px; padding-left: 10px; margin-top: -13px ; margin-right: 10px; color: #fff;  font-weight: 400; font-family: 'Pacifico', cursive;  font-size:18px; font-style: normal; }


Personalizando:
width - tamanho da caixa (não esqueça do 'px' no final);
background - cor do fundo;
margin (top; bottom; left; right) - margens;
padding - espaçamento;
a - cor do link (ex. .post-author a)
a:hover - cor do link quando clicar (ex. .post-author a:hover)
color - cor da fonte;
font-family - tipo da fonte;
font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400;
font-style - estilo da font, suas variações são oblique, initial, inherit.

** Fontes utilizadas - copie o link e cole antes da tag </head> -
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Indie+Flower|Pacifico|Satisfy' rel='stylesheet' type='text/css'/>

Deixe nos comentários sugestões para o próximo tutorial.
Beijos!


Comente pelo Facebook

28 comentários:

  1. tava procurando um código pra personalizar foto e o rodapé da postagem, ajudou bastante!

    blog novo winterofme.blogspot.com

    ResponderExcluir
  2. Ensina a colocar separador dos gadgets? Já tentei, mas nunca consigo.
    Beijos <3

    ResponderExcluir
  3. Muito bom o tutorial =) como sempre rsrs
    Podes me informar qual o nome da fonte que você usa no titulo do seu blog?
    Morro por essa fonte mas nunca acho.

    Obrigada =)

    ResponderExcluir
  4. Nossa, que legal esse estilo de postagem. Comecei a mexer com html tem pouco tempo e apanho loucamente! hahaha E olha, quem sabe tu não ensina a deixar o menu no estilo do teu? Centralizado e entre barras? Sempre tentei mas sozinha não consegui e não achei tutorial que ensinasse. D: haha Beijão!

    Coisa da Lud

    ResponderExcluir
  5. Ajudou bastante! Faz tutorial de como colocar o menu abaixo do cabeçalho, sempre dá errado comigo :/

    ResponderExcluir
  6. Adorei muito mesmo,mas no meu o titulo e a data da postagem deu erro,a data não aparece,o titulo fica no canto esquerdo ... :(
    S.O.S

    ResponderExcluir
  7. Obrigada bruna,vais fazer uma serie do tutoriais para acompanhar este?

    ResponderExcluir
  8. Bruna, esse código serve para o modelo travel do blog ?

    ResponderExcluir
  9. bruna a data não fica desse jeito, fica cinza e muito grande, até tirei. me ajuda http://meninotosco.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. é necessário adicionar a fonte que deixei no final da postagem Vinicius :D

      Excluir
  10. Bruuuuu, tentei usar a data mas não deu certo. A data normal some, e o local onde era p ela ficar fica em branco :(

    SOOOOOOOOOOOOOOOOOOOOOS

    ResponderExcluir
  11. Eu não entendi como que faz a personalização :(

    ResponderExcluir
    Respostas
    1. cada 'nome' corresponde a um tipo de personalização, como por exemplo o background com a cor que deseja e assim por diante :D

      Excluir
  12. Nossa bruna ameei Suas dicas estou criando um novo lay e simplismente usei todas as dcas da tag tutorial

    ResponderExcluir
  13. Oi Bruna seu tutorial é mesmo muito bom, à tempos eu procurava um tuto pra deixar a imagem do post assim como as suas, só que tem um problema as imagens só ficam certas quando o post não está dividido e caixas, quando separa os post não fica certo, pode me ajudar??? Quero muito usar esse tuto no meu novo layout. :)

    ResponderExcluir
    Respostas
    1. Lizi, não entendi a pergunta, você pode enviar um print do erro?

      :D

      Excluir
  14. Esse tutorial me ajudar muito, a séculos que eu estava tentando mudar a data da postagem para ficar ao lado do título. Bjs adoro seu blog. Que bom encontrar uma Pernambucana por aqui :)

    ResponderExcluir
  15. Oi Bruna! Qual sãos os códigos antigos que você falou no post que tenho que deleta?
    Beijão!

    ResponderExcluir
  16. Bruna me socorre! Como eu faço para separar a caixa de comentários da de posts assim como o seu? Agradeço desde já!

    ResponderExcluir
  17. Dá pra especificar melhor onde é que cola cada parte do código, o que é que apaga, etc? Não achei muito claro.

    ResponderExcluir
  18. Oi, que partes do código antigo é preciso excluir antes de colar os códigos que você disponibilizou?

    ResponderExcluir
  19. Bruna, seu tutorial é exatamente o que procuro mas não entendi direito como fazer. O primeiro código coloco entre e . Mas e o segundo código?

    ResponderExcluir
  20. Não entendi muito bem. Onde coloco estes códigos que você colocou ??
    Quais cógidos CSS devo realmente apagar ?? Pode me explicar ??

    ResponderExcluir
  21. Só não entendi onde coloco os códigos, quero dizer, quais tenho que apagar?

    ResponderExcluir