Mover dados do Post-Footer

Hoje venho trazer uma postagem sobre 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.