Personalizando a área do Post do Blogger

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

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;
}

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

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.

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