Tweet Personalizar Área de Postagens do Blogger - I Parte

Tenho recebido comentários e emails de leitores interessados em personalizar sua área de postagens, como mudar a posição dos títulos dos posts, formato de data, footer, etc.  Então vamos lá:
Em primeiro, lugar para sua melhor compreensão, veja este artigo que mostra a estrutura básica de um template.



Conheça a área de postagens e o que ela contem, o Main-wrapper.

• Main-wrapper , a área pintada de verde no desenho, é o espaço externo na secção de dentro do content-wrapper. Dentro de main-wrapper estão os blocos de post, comentário, data de postagem, etc. 

Abaixo você verá um código CSS usado como exemplo.

 #main-wrapper {

width: 450px;

background: #000000 url (URL DA IMAGEM) repeat;

border: 1px solid #000000;

float: $startSide;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

width: para mudar a largura da coluna
background: Para mudar a cor ou colocar uma imagem (tipo textura, pattern ou outra) de fundo
border: Para colocar uma borda.

• 1px; + Largura da borda.
• solid = Estilo de borda em linha reta
• dashed = Se quiser uma linha pontilhada

float: Define de que lado vai ficar a coluna.

• $startSide ou left - para flutuar à esquerda
• $endSide ou right -para flutuar à direita

margin: Para alterar a distancia entre main-wrapper e os outros elementos
Modifique 0px; para 10px; por exemplo ou para o número que quiser para sua margem. Vá mudando e visualizando sempre até chegar ao resultado desejado.

Os valores das margens (0px 0px 0px 0px;) funcionam do sentido horário, ou seja, o primeiro 0px; corresponde ao topo, o segundo corresponde à direita, o terceiro corresponde abaixo e, o quarto corresponde à esquerda!


padding: É a distância das bordas da área de postagem. Para alterar faça o mesmo procedimento da margem.
Basicamente são essas as modificações que podemos alterar ou acrescentar na área total de postagem , #main-wrapper). Agora passamos para alterar a área interna dos posts.



Agora passamos para alterar a área interna dos posts (área pintada de preto no desenho) . Vamos ver como modificar elemento por elemento no espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé, link de comentários etc)

/* Posts
-----------------------------------------------

h2.date-header {
margin:1.5em 0 .5em;
background: black;
}

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

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

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}

.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;

Entenda cada trecho da área dos posts

Data:
h2.date-header {
Para determinar a posição da data use:

• text-align: right; (data flutua à direita)
• text-align: left; (data flutua à esquerda)
• text-align: center; (data flutua no centro)
• 
  

Se você quiser colocar um ícone em forma de calendário, veja esse tutorial da Áurea do Templates Para Você: Data do Post em Forma de Calendário

Post:

.post {
Aqui você pode definir as cores , colocar ou não bordas, colocar uma imagem no background (fundo) diferenciando o espaço da postagem.

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
  border-bottom:1px dotted #000000;
background: #ffffff url(URL DA IMAGEM);
}

Titulo do Post:
.post h3 {
Nesta parte que você pode acrescentar imagem e borda para se aplicar a todos os títulos de suas postagem.
Veja aqui como colocar imagem no titulo do post.
Para colocar borda no titulo do post, veja o exemplo abaixo:

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

Para colocar uma imagem antes do título dos posts faça o seguinte:

Dentro do HTML do seu blog e clique em "Expandir elementos de página.

      Não se esqueça de fazer um backup do seu template!

Procure pelo código (use as teclas Ctr+F):

<a expr:href='data:post.url'>

Ao lado dele coloque o código abaixo:

<img src="AQUI O ENDEREÇO DE SUA IMAGEM"/>

Muito bem,

No próximo artigo, vamos entender como personalizar:

• Imagem do Post
• Rodapé (footer)
• Links para comentários

*************************************