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 != "true"'>,</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 MarginAutor 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.
