Tags, autor e comentários abaixo do titulo da postagem

Hi imaginers! Quanto tempo né? Pois é, uma semana sem postar, desculpem mesmo, é que como sempre o tempo anda corrido pra mim rsrs São tantos compromissos: cursos, crisma, consultas rotineiras e por aí vai! Então hoje vim trazer o tutorial que algumas pessoas me pediram pra postar que é de como colocar os dados do post abaixo do titulo do mesmo. Vejam a imagem aí:

Gostou e quer aprender? Clica logo em leia mais!

Antes de tentar o tutorial salve uma cópia do seu template pra possíveis erros.

O tutorial pode parecer um pouco complicado logo de cara então leia atentamente antes de sair por aí fazendo tá? Mas garanto que não é difícil, só requer um pouquinho de atenção!
Abra o blog, vá em design, editar HTML e marque a caixinha "expandir modelos de widgets".

Tecle Ctrl F e procure por post-footer-line  , é onde ficam os trechos que vamos recortar. Sempre recorte de <span class=”(…)”> até </span>. Recomendo que recorte e cole no bloco de notas, facilita -e muito- o tutorial. Os trechos são:

(Autor do post)

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

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

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

Depois de recortá-los procure por <div class='post-header-line-1'/>  de enter e cole os códigos que você recortou. Eles vão ficar como é aqui no blog, todos na mesma linha. Se você quiser colocar um em cada linha  é só colocar <br/> depois de cada </span> . 
Você pode mudar a ordem se quiser, é só trocar os códigos de lugar!
Para deixar com aquela divisória assim: | é só colocar ela depois do primeiro e do segundo </span>
Exemplo: <código do autor> | <código dos marcadores> | <código dos comentários>


Obs: Pode acontecer de ficar por exemplo as tags repetindo abaixo do titulo e no rodapé do post, para corrigir isso é só você procurar pelo código da parte que está repetindo e se tiver mais de um apague o que se refere ao post footer (rolando a página um pouco pra cima você vai achar, então saberá).


Vamos enfeitar?
Procure por h3.post-title { e depois de } (quando acaba o primeiro trecho) cole o seguinte código:

.post-header, .dados {

border-top: 1px solid #ccc;

border-bottom: solid 1px #ccc; /*cinza*/

padding: 1px 0 1px 12px; /*espaço topo direita baixo esquerda/*

margin: 0;

border-bottom: solid 1px #ccc; /*cinza*/

text-align: center;

}

Você pode mudar as cores (#ccc) a espessura das bordas (1px) e trocar solid por dashed para deixar a borda sublinhada.

Obs: Testado somente no template Travel!

Era isso, eu testei o tutorial em 2 blogs de teste e deu certo espero que tenham gostado e que vocês consigam fazer também. Lembrando que aprendi no Alma e coração, então créditos ao blog.


Aviso: Atualizei o tutorial da imagem no topo da área da postagem! Quem não conseguiu tenta de novo tá?
Beijos e fiquem com Deus!

Não me responsabilizo por o tutorial não funcionar, cada template é diferente e tem códigos diferentes, o que não funciona pra vocês podem funcionar pra outros assim como funcionou pra mim. Não posso fazer nada.