Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1501102909
Vida do cache: 1501146109
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Iniciantes Postagens

Personalizando a área do Post – (Parte1)

(Este é um post da categoria Tutoriais para iniciantes)

Dando segmento a serie sobre Variáveis CSS e os Elementos do Blogger, hoje vou falar sobre como Personalizar a área de post do seu template.
Você já viu como personalizar a área total de postagens(main), agora você vai entender como modificar elemento por elemento no espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé, link de comentários etc).

Visualize a imagem abaixo para identificar melhor a área do post. Ela está destacada na cor azul:

((Clique na imagem para ampliá-la))

[alerta]Para que este post não fique tão extenso dividirei em duas partes.
Aqui eu vou falar sobre os elementos: Data, Postagem,Paragrafo do Post e Titulo do Post(parte destacada em vermelho nas tags abaixo)
Os demais elementos ficarão para a proxima postagem.[/alerta]

No corpo do HTML dos templates minima e na maioria dos templates modificados, a área de post está representada por estas tags abaixo:

/* Posts
------------------------*/
h2.date-header {
}
.post {
}
.post h3 {
}
.post h3 a, .post h3 a:visited, .post h3 strong {
}
.post h3 strong, .post h3 a:hover {
}
.post-body {
}
.post p {
}

.post-footer {
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
}
.post blockquote {
}
.post blockquote p {
}

Já nos templates Designer de Modelo, a área de post está representada por estas tags abaixo:

/* Posts
-------------------------------- */
h3.post-title {
}
.post-outer {
}
.post-body {
}
.post-header {
}
.post-footer {
}

Entendendo cada elemento na área do post:

1) Data:

Nos templates Minima, a data está representada pelo primeiro elemento do código postado acima, que é
h2.date-header {

No Designer de modelo, a data está representada por :
.date-header span
Se você quiser alinhar a data, você pode usar ‘text-align’, e deixar a data a direita(right), esquerda(left) ou central(center).
Se quiser acrescentar ou editar cores da fonte, acrescente a linha com o código referente a cor que vc deseja:
color: #xxxxxx;
Se quiser personalizar o tamanho da fonte, acrescente a linha com o código referente ao tamanho da fonte que vc deseja:
font-size:12px;
(Na imagem acima a área da data está destacada na cor verde).
Leia alguns artigos que tratam sobre personalização da Data, talvez você se interesse em conhecer outras maneiras de personalizar a data de suas postagens:
Personalizar a Data do seu Post em Forma de Calendário
Colocar a Data das Postagens abaixo do titulo do post
Colocar a Data das Postagens na linha do Rodapé do post

2) Post:

é o segundo elemento do código. Se refere a toda a área dos posts.
Nos templates Minima, este trecho está representado por:
.post {
Já nos Templates “Designer de Modelo”, este trecho está representado por:
.post-outer {

Os trechos acima se referem a toda a área de postagens. Todos os estilos CSS que você aplicar dentro do código “.post” ou “.post-outer” se estenderá a toda a área de postagem. (Na imagem acima está destacada na cor azul clarinho).

.post-body – se refere somente ao corpo do post. Os estilos que você aplicar neste trecho valerão somente para o corpo do texto das postagens. Não se aplicará a toda a área de postagens. (Na imagem acima está destacada na cor cinza).

Nestes elementos você pode definir cores, bordas e até mesmo colocar uma imagem de fundo (background) diferente para o espaço ocupado pela postagem.
Para isso você precisará acrescentar estilos CSS.
Basta acrescentar as linhas “border” e “background” e aplicar os estilos a elas. Veja exemplo abaixo, retirado do template designer de modelo, modelo simple:


.post-outer{
padding:20px;
border-bottom:1px dotted #000000;
background:#E0FFFF url(URL DA IMAGEM) no-repeat;
}

Ao acrescentar uma imagem como background, veja as maneiras que você pode estipular o comportamento da imagem lendo o artigo que trata sobre como modificar o background e veja também como Personalizar Bordas no Template.
Confira também:
Criar Bordas Arredondadas

Outra dica para personalizar a área do post é sobre o espaçamento entre linhas, o line-height. Apesar de ser um recurso simples, ele faz muita diferença na hora de ler uma postagem.
line-height -> altura da linha.
Ex: line-height: 1px;

Você também pode estipular:

• Tipo de fonte.
Ex: font: $bodyfont;

• Tamanho da fonte.
Ex: font-size: 20px;

• Espaço entre as letras.
Ex: letter-spacing: 1px;

• Alinhamento do texto (left, right, center, justify)
Ex: text-align: left;

• Decoração do texto.
Ex: text-decoration
Para a decoração do texto você pode atribuir as seguintes variaveis:
text-decoration: underline; -> sublinhado
text-decoration: line-through; ->Texto com linha em cima
text-decoration: overline; -> sobrelinhado

• Tranformação do texto.
Exemplos:
text-transform: none; -> sem efeito
text-transform: capitalize; -> primeira letra das palavras maiúsculas
text-transform: uppercase; -> todas letras maiúsculas
text-transform: lowercase; -> todas letras minúsculas

Para melhor entendimento, leia alguns artigos que explicam sobre personalização de fonte e texto:
A propriedade CCS ‘Text’
Variáveis do Tipo Fonte

3) Paragrafo do Post:

O parágrafo no código html do seu template é representado por <p></p> e para modificá-lo, ou acrescentá-lo, o trecho é esse:
.post p {
Neste trecho você pode adicionar um recuo de texto, e para isso use a propriedade text-indent
Ex:


.post p {
margin:0 0 .75em;
line-height:1.6em;
text-indent: 30px;
}

Este efeito só aparecerá nos trechos que estiverem entre <p></p>

4) Titulo do Post:

Neste trecho não trataremos somente do título, mas também dele como link ativo, visitado e hover.
(Na imagem acima este trecho está destacado na cor rosa).

Primeiramente vamos falar sobre o titulo do post que, nos Templates Minima, está representado pela variável:
.post h3 {
Já nos Templates Designer de Modelo, está representado pela variável:
h3.post-title {

É nesta parte que você pode acrescentar imagem, borda, tamanho da fonte, cor da fonte, alinhamento do texto, entre outros, para se aplicar a todos os títulos de suas postagem.
Se quiser colocar uma imagem no título do post, veja neste tutorial como colocar imagem no titulo do post.

Para colocar borda no titulo do post, veja o exemplo abaixo, retirado do template minima:


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
border-bottom:1px dotted #000000;
}

No exemplo acima a borda aparecerá apenas na parte de baixo do título, se quiser colocar uma borda em volta de todo o título use apenas “border”.
Se você quiser alinhar o titulo, você pode usar ‘text-align‘, e deixar o texto do título a direita(right), esquerda(left), central(center) ou justificado (justify).
Se quiser acrescentar ou editar cores da fonte, acrescente a linha com o código referente a cor que você deseja:
color: #xxxxxx;
Se quiser personalizar o tamanho da fonte do título, acrescente ou altere a linha com o código referente ao tamanho da fonte:
font-size:12px;

O Titulo do post como link ativo, visitado e hover, nos templates mínima, está representado pelas seguintes variáveis:
.post h3 a, (link ativo)
.post h3 a:visited, (Link já visitado)
.post h3 a:hover,(Mouse em cima)
Já nos Designer de Modelo:
h3.post-title a, (link ativo)
h3.post-title a:visited, (Link já visitado)
h3.post-title a:hover,(Mouse em cima)
Se não tiver esses trechos no seu modelo, você pode acrescentá-los.

Todos os estilos que você aplicar em .post h3 como cores,bordas,background, fonte etc, você deverá aplicá-los também em:
.post h3 a, .post h3 a:visited, .post h3 strong

Se você quiser acrescentar efeitos como decoração e transformação de texto, utilize os mesmos recursos mostrados acima referente ao item nº 2: “Post”.
Para melhor entendimento, leia alguns artigos que explicam sobre personalização de fonte e texto:
A propriedade CCS ‘Text’
Variáveis do Tipo Fonte

Leia outros artigos que tratam sobre personalização do título do post, talvez você se interesse em conhecer outras maneiras de personalizar o título de suas postagens:
Personalizar os Títulos dos Posts
Efeito Sombra
Bordas arredondadas

Se quiser continuar a seguir os demais tutoriais sobre Personalização da área do post, leia também o próximo tutorial desta série:
Personalizar a área do post (parte 2) que trata sobre IMAGEM DO POST (post img), RODAPÉ (post-footer), LINK DOS COMENTÁRIOS (comment-link) E CITAÇÃO DE TEXTOS (.post-blockquote).

Artigo atualizado em jun/2012.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

23 Comentários

  1. Daniel_MK disse:

    Olá, eu já havia procurado tutoriais como esse em muito sites, o único que eu consegui aplicar no meu blog foi o seu, parabéns ^^
    Meu ajudou muito, valeu!

  2. Parabéns Grande Vanessa! Show de css obrigado aprendi muito com seus posts….

  3. Daniel Death disse:

    Nossa,muito massa esse tutorial!!!Parabéns ao dono do site,só peço que coloque um menu melhor,pq ta dificil encontrar algumas coisas!"

  4. Britney Life disse:

    Vlw ..Obrigada

  5. .:: Clau ::. disse:

    Britney
    Dá uma olhada no marcador "postagens" lá tem vários tutoriais que tratam sobre personalização da área de postagenns, poder ser que vc encontre algo que te ajude. Dá uma olhada tb no tutorial: "ocultar elementos em páginas especifica", pode ser que te ajude a respeito de ocultar a sidebar.

  6. Britney Life disse:

    Olá, em primeiro lugar gostaria de agradecer pois aprendi tudo com seu blog e ele é maravilhoso…Meu template é um modelo seu modificado mas com os devidos créditos claro e tb tenho seu selinho nas áreas de postagens.
    Gostaria de saber se vc tem um post publicado de como aplicar estilos a área das postagens igual das páginas estáticas ou página inicial.
    Pois eu gostaria que só aparecesse uma sidebar nas areas de postagens …Obrigada bjus e parabéns

  7. .:: Clau ::. disse:

    Douglas
    Lamento,mas vou ficar devendo essa, pq não sei te informar.

  8. Douglas Rodrigues disse:

    Olá, gostaria de saber como faço para que a area do post utilize 100% da altura disponivel no navegador?

  9. alex.fx disse:

    Oi… consegui resolver o problema, obg!

  10. alex.fx disse:

    Olá Clau, estou criando um blog mas estou tendo diversos problemas principalmente com o tamanho das coisas.
    O maior problema é com o tamanho da imagem que posto. Ela fica pequena (devido o modelo que escolhi). E só fica no tamanho real quando a pessoa abre a postagem.
    Como faço para alterar o tamanho da area de postagem? Jah olhei seus tutoriais mas não consegui…
    O template que estou usando é o AndroidPhone.

  11. .:: Clau ::. disse:

    Kambei
    Por favor, peço que leia os leia os Termos de Uso do Blog.
    Obrigada!

  12. kambei disse:

    Olá @.:: Clau ::. eu estou a desenvolver um template e a um bug que gostaria que me ajuda-se a corrigir, nos posts o texto têm espaçamento entre palavras e gostava de conseguir tirar ja usei o word-spacing: 0px; mas não funcina.
    Consegue resolver o problema?

  13. .:: Clau ::. disse:

    Layla
    Leia o tutorial sobre "modificar o background", o link já está neste artigo.

  14. Gislaine disse:

    Oi Clau!
    Consegui resolver meu problema !
    Apenas acrescentei o trecho text-tranformation: bold; na área do post e deu tudo certo!
    Ainda assim, obrigada pela atenção!

  15. Gislaine disse:

    Oi Clau !
    Estou com uma dúvida urgente!
    É o seguinte, mudei de template há alguns dias, e hoje, quando fui postar um resenha, percebi que nos posts o negrito não aparecia. Tentei olhar no código, mas não sei onde há algo referente a isso… Por favor, me ajuda!

  16. Layla Costa disse:

    olá, Clau, parabéns por este blog e tbm pelo blogosfera legalizada, ambos são um verdadeiro suporte para os blogueiros principalmente os iniciantes ( como eu), aprendi muita coisa com aki. mas tenho uma dúvida cruel, colokei uma imagem na minha área de post e keria q ela se acomodasse ao corpo do texto de maneira contínua sem se repetir, q nem a q vc usa aki no mundo blogger, mas em vez disso ela se repete na vertical qnd o post ó grando. tem algumcódigo ou macete para fazê-la se prolongar ao longo do texto e ñ se repetir? desde já agradeço!! bjss

  17. Mari Bisonti disse:

    Puts, me ajudou demais.! Muito Obrigada.!

  18. Marta D'Almeida disse:

    Oi, como é que posso mover as etiquetas da postagem para o rodapé? Tentei fazer através dos Elementos de página e nao deu 😐

  19. Lucas Hb disse:

    Clau,uma coisa que não gosto no blogger,è que em toda postagem fica escritoa hora e data tem como ocultar a hora e a data do post?

  20. Wesley disse:

    Olá Clau, estou usando template mínima, tentei mudar o .post h3 (titulo) acrescentando apenas font-size: 22px; e não altera nada ! =/

  21. Marcelo Souza disse:

    Olá Clau, eu de novo…
    Mas dessa vez só para agradecer muitíssimo por mais um tutorial PERFEITO. Fiz e deu tudo mais que certo!
    Obrigado mesmo viu!!!
    Vou adicionar ainda hoje um link para este magnífico blog!
    Fico muito agradecido a você e a Mama que me apresentou seu trabalho!
    Abração!

  22. ÁDAMYS disse:

    Oie
    como faz para colocar uma imagem no final do Post?

  23. @gabrielC_ramone disse:

    comofas pra colocar tipo,só nas partes de cima e de baixo do corpo da postagem,alguma img ou bordinha? não queria deixar um quadradão horrivel(meu blog –> http://www.guidable.tk)

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.