Inserindo e personalizando a Área de Post

Galera este é um tutorial COMPLETO de como colocar e personalizar sua área de post. Portanto, prestem bem atenção pois o tutorial é muito grande e qualquer erro conta para você se perder. Este tutorial é baseado no Template Mínima

Primeiramente você terá que aumentar a área de post ou diminuir pra deixar do tamanho que você desenhou. Procure pela tag:

#Main
Logo abaixo dela você verá que terá esse seguinte trecho:

width: XXpx; /* COLOQUE A LARGURA DA SUA ÁREA */
Lá terá algum valor em pixel dai é só você colocar o tamanho da sua área de post. Agora vamos adicionar a área toda.

Vamos começar pelo topo do post.

1º Vá em >> Design >> Editar HTML >> Expandir Modelos >> procure pela seguinte tag:

<b:if cond='data:post.title'>
Irá aparecer duas tags, porém será a primeira.

O código completo é esse aqui:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Agora você irá substituir todo código do título por esse aqui:

<div class='post-title entry-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if></div>

2º Agora vamos adicionar o CSS e HTML do titulo, procure por:

]]></b:skin>
Logo acima dela adicione o seguinte CSS e HTML:

/* Titulo By: Lord Schiffer {
----------------------------------------------- */
.post-title {
float: left;
margin: -92px 0px 0px 140px;
font: normal bold 18px 'arial',Verdana,Arial,Sans-serif;
color: #fff !important;
text-shadow: #000 0px 1px 2px;
}
Agora é só editar a flotagem, a margin de acordo com o float, o formato da fonte e seu tamanho, a cor e o shadow.

Salve!

Agora como está aplicado um CSS e HTML direto no título, a imagem do topo-post irá desaparecer, portanto teremos que aplicar uma div com a imagem do topo post.

Vá em >> Design >> Editar HTML >> Expandir Modelos e procure por:

<a expr:name='data:post.id'/>
Abaixo dela adicione a seguinte div:

<div style='width: XXXpx; height: XXXpx; background: url(URL DA IMAGEM) no-repeat;'></div>
Nota: Caso você tenha adicionado o código dos avatares essa div do topo-post terá que ser fechada após o código dos avatares, ficando assim:

<div style='width: XXXpx; height: XXXpx; background: url(URL DA IMAGEM) no-repeat;'>


AQUI O CÓDIGO TODO DOS AVATARES!
</div>
Coloque a largura da imagem e a altura.

Agora vamos para o meio:

Como estamos trabalhando com base no Template Mínima, a área do meio do post não tem, portanto vamos adiciona-lo:

Procure pelo seguinte trecho:

.post-footer
Acima dele adicione o seguinte trecho:

.post-body {
color: #fff; /* Mude a cor do texto da área de post */
text-shadow: #000 0px 1px 2px; /* Mude a cor da sombra ou a sua direção */
padding: 1px 5px 0px 5px;
}
HTML>body .post-body {
background: url(URL DA IMAGEM DO MEIO DO POST) repeat;
}
Primeiramente adicione a imagem do meio do post, no local aonde está bem visível acima... Depois disso você terá que mexer com o Padding isso é para afastar o texto para dentro do post caso ele esteja fora, a sequência dos valores é o seguinte: Cima, Direita, Baixo e Esquerda, caso queira colocar o texto para direita aumente o valor da esquerda caso queira afastar para a esquerda aumente o valor da direita e assim por diante.
Depois disso agora é só adicionar o rodapé do post. Procure por:

.post-footer
Abaixo do trecho citado acima coloque os seguintes trechos:

background: url(URL DA IMAGEM DO RODAPE DO POST) no-repeat;
width:608px; /* LARGURA DA IMAGEM */
height: 30px; /* ALTURA DA IMAGEM */
Agora é só colocar o URL da imagem do rodape do post e colocar os valores do tamanho.
Agora vamos aprender a Mover dados do Post-Footer. Bem, oque seria isso? São dados que ficam no footer da área de postagem que já vem por padrão do miníma, que ficam: Link dos Comentários, Autor da postagem, Data e Hora e por fim os Marcadores. Portanto, nesta postagem abordarei este assunto detalhadamente, para ensinar a move-los e consequentemente personaliza-los.

1º - Iremos em, >> Design >> Editar HTML >> e clique em >> Expandir Modelos.

Em se tratando de post-footer procuraremos a seguinte DIV:

<div class='post-footer'>
Abaixo desta DIV terá os seguintes dados:

Dodos do Comentário

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Dados do Autor

<span class='post-author vcard'>
<b:if cond="data:top.showAuthor">
<data:top.authorlabel>
<span class="fn"><data:post.author></data:post.author></span>
</data:top.authorlabel></b:if> </span>

Dados Data

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Dados Marcadores

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span> Para mover para o post-header (topo-post) você terá que recortar o dado do que você quer mover do post-foter, e colocar abaixo desta DIV:

<div class='post-header-line-1'/>
Só que para não ocorrer nenhum erro, você terá que fazer o seguinte: apagar essa barrinha >> / <<, e deixa-lo da seguinte maneira:
<div class='post-header-line-1'>DADOS AQUI NO MEIO</div>
Feito as etapas citadas corretamente, visualize... caso não dê erro salve, se der... comece tudo novamente, e faça com paciência.

2º - Vamos posicionar e adicionar o CSS.

Busque pela seguinte tag:

]]></b:skin>
Acima dela adicionaremos todo o CSS dos dados movidos.

Comentários

Para posicionar e personalizar os comentários, adicione o seguinte CSS (feito por mim *-*) acima da tag citada:

/* Comentários By: Lord Schiffer
----------------------------------------------- */
.post-comment-link{
float: left; /* Edite a floatagem */
margin: -10px 0px 0px 10px; /* Edite as margins de posicionamento de acordo com a flotagem */
font-family:'Arial';
font-weight:normal;
font-size:11px;
color:#fff;
text-shadow: #000 0px 1px 2px;
background: #272727;
border-radius: 5px;
padding: 5px 4px 4px 4px;
}
.post-comment-link a{
font-family:'Arial'; /* Edite a fonte */
font-weight:normal;
font-size:11px; /* Edite o tamanho da fonte */
color:#fff; /* Edite a cor da fonte */
text-shadow: #000 0px 1px 2px;
background: #999; /* Edite a cor d fundo*/
border-radius: 5px;
padding: 5px 4px 4px 4px;
}
.post-comment-link a:hover{
font-family:'Arial'; /* Edite a fonte */
text-decoration: none;
font-weight:normal;
font-size:11px;/* Edite o tamanho da fonte */
color:#bfbfbf; /* Edite a cor da fonte */
background: #2f3f52; /* Edite a cor d fundo*/
border-radius: 5px;
padding: 5px 4px 4px 4px;
text-shadow: #000 0px 1px 2px;
}
Edite as cores e a fonte ao seu gosto. Caso não esteja conseguindo posicionar os links, leia o seguinte tópico sobre margin:Propriedade Margin

Autor da Postagem

Adicione o seguinte CSS acima da tag já citada para posicionar e personalizar o autor:

/* Autor Post By: Lord Schiffer
----------------------------------------------- */
.post-author {
float: left;
margin: -41px 0px 0px 210px;
font-family:arial;
font-weight:normal;
font-size:15px;
color: #fff !important;
}

Data

Para posicionar e personalizar a data, procure pela seguinte tag:

h2.date-header {
Apague todo, e adicione o seguinte no lugar:

h2.date-header {
float:left; /* Edite a floatagem */
margin: 63px 0px 0px 50px; /* Edite as margins de posicionamento de acordo com a flotagem */
color: #ccc; /* Edite a cor da fonte*/
text-shadow: #000 0px 1px 2px; /* Edite a sombra da fonte */
font-weight:normal;
font-size: 14px; /* Edite o tamanho da fonte */
font-family:Arial; /* Edite a fonte */
text-transform: upercause; }

Marcadores

Adicione o seguinte CSS acima da tag já citada para posicionar e personalizar o os marcadores (caso você não queira os marcadores apague o código citado logo no começo da postagem):

/* Marcadores By: Lord Schiffer
----------------------------------------------- */
.post-labels{
font-family:Arial;
font-weight:normal;
font-size:14px;
color:#fff;
float: left;
margin-top: 16px;
margin-left: 22px;
text-shadow: #000 0px 1px 2px;
}
.post-labels a{
font-family:Arial;
font-weight:normal;
font-size:1px;
color:#fff;
text-shadow: #000 0px 1px 2px;
}
.post-labels a:hover{
font-family:Arial;
text-decoration: none;
font-weight:normal;
font-size:1px;
color:#ccc;
text-shadow: #000 0px 1px 0px;
}
Faça sua edição de cores, fontes e tamanho de fonte de acordo com o tema do seu template.

Se você conseguiu fazer tudo como ensina a post.. Parabéns... é um sinal que realmente você está em busca de conhecimento, e eu fico muito feliz de poder ajuda-lo, e que essa postagem gigantesca não foi feita à toa. É isso ai, espero que tenham gostado, e ate a próxima.

Caso tenha alguma dúvida contate-me no chat ou deixe um comentário.