Personalizando a área do Post – (Parte1)

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn