Autor, Tags e Coments abaixo do título

Hoje vou postar um tuto bem conhecido por vocês (ou não), nossa amiga Anjinha Nati  (é assim que esta o nick dela) esta com dificuldade de encontrar, Ela queria saber: como colocar Postado por e tals em baixo do título do post ? por isso.. Seus problemas acabaram \o/ eu fiz o tuto p/ tu que até minha prima entendeu..e saiba que ela tem 'dificuldades do tamanho do Godzilla' com essas coisas de computador/internet como ela mesmo diz rsrs..

 Vá em Design    Editar HTML    Marque:  Expandir modelos

 Ctrl f e procure por: post-footer-line   (é onde estão os códigos)

Recomendo que use o bloco de notas  pois vamos recortar os códigos e colar em outra parte do Html, 

 Importante: Preste atenção e recorte sempre desde <span class= até </span> como eu destaquei em rosa, ao contrario vai dar erro no html

Os códigos à serem recortados são:

Código do autor do post

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<b:if cond='data:post.authorProfileUrl'>

<span class='fn'>

<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>

<data:post.author/>

</a>

</span>

<b:else/>

<span class='fn'><data:post.author/></span>

</b:if>

</b:if>

</span>

Código dos comentários

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

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

Código dos 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 não errar cada código que recorto eu vizualizo p/ ver se não deu erro no html e se copiei certinho, assim não preciso apagar todo código caso algo dê errado.:)

Depois de recortá-los aperte Ctrl F novamente e  procure por: <div class='post-header-line-1'/>  

e abaixo desse trecho cole os códigos recortados, automaticamente ficarão lado à lado, mas caso você queira deixar uma a baixo do outro, basta colocar <br/> depois de cada </span>

Vai ficar assim:

Se quiser colocar aquela borda como a que eu uso:

Exemplo:

 É só apertar Ctrl f e procurar por: .post-header {
  Antes de fechar a chave cole o seguinte código:

text-align:center; /*Centraliza o texto*/
border-top: dotted 1px #ddd;
border-bottom: dotted 1px #ddd;

 Se por acaso do destino (rsrs) não encontrar esse código cole depois de fechar a chave de h3.post-title

.post-header {

text-align:center;

border-top: dotted 1px #ddd; 
border-bottom: dotted 1px #ddd;

padding: 3px; /*Espaço palavra e linha*/

margin: 8px; /*Margem da linha com o post*/

line-height: 10px; /*tamanho (altura) da linha (borda)*/

}

Assim:

 Se quiser alterar o tamanho da fonte, adicione antes de fechar a chave do .post-header { 

font-size:12px; /*Tamanho que quiser*/

 E se quiser colocar aquela barrinha divisória  é só acrescentar | no fim do </span> dos códigos.

Estilos de borda aqui: aqui

     Tabela de Cores aqui

Obs: Testado  no template Travel (viagem) e Watermark (espetacular)