Como adicionar data, autor e marcadores abaixo do titulo do post

Provavelmente você tem visto muitos blogs que mostra a data, nome do autor, e marcadores abaixo do titulo do post.

  Isto é muito útil para os seus visitantes, assim eles podem navegar facilmente dentro do marcador do post. Eu já utilizo esse recurso no meu blog; veja abaixo dos títulos do meus posts.

Então, eu vou lhe ensinar como adicionar esse recurso no seu blog abaixo do títulos dos posts.

Como adicionar data, autor e marcadores abaixo do titulo do post no seu blog

1. Entre no seu Painel do Blogger clique em modelo ---> depois em Editar HTML.

2. Certifique-se de ter feito um backup de seu modelo antes de fazer quaisquer alterações no seu HTML.

3. Agora clique em Expandir modelo de Widgets.

4. Pesquisar o código abaixo no seu modelo. Mais informações sobre: ​​"Como encontrar um código no Blogger Template".

]]></b:skin>

5. Pouco antes de "]]> </ b: skin>" adicionar o código abaixo CSS.

/* Start Postmeta Icons CSS Code by http://www.guiablogger.com.br*/
.postmeta-primary{font-family: Arial,Helvetica,sans-serif;text-shadow: 1px 1px 3px #f7f7f7;color:#222;font-size:11px;text-transform: capitalize;padding: 5px 0;border-bottom:1px dashed #ccc;margin-bottom:10px}
.postmeta-secondary {background: none repeat scroll 0 0 #DBDBDB;border: 1px solid #CCCCCC;color: #DC0771;font-size: 12px;font-weight: bold;margin-top: 10px;   padding: 5px;}
.meta_date,.meta_author,.meta_categories{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://3.bp.blogspot.com/-HtLpT8FHgVI/Td-m0u_f4WI/AAAAAAAAHDs/u68p5bwgE8c/s1600/time.png)}
.meta_author{background-image:url(http://4.bp.blogspot.com/-VRKtPlowsDI/Td-mUaAlF2I/AAAAAAAAHBU/Hc_M-KSNWT8/s1600/author.png)}
.meta_categories{background-image:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Ss44Xlzeq1I/AAAAAAAAB7I/EdpligkErdk/s400/folder.gif)}
/* End Postmeta Icons CSS Code by http://www.guiablogger.com.br */

6. Agora, procure o código abaixo.

<div class='post-header-line-1'/>

7. Em seguida, substitua o código acima pelo código abaixo.

<div class='post-header-line-1'/>
<div class='postmeta-primary'>
<span class='meta_date'>Posted On : <b style='color: green; font-weight:normal;'><data:post.timestamp/></b></span>
 &amp;nbsp;<span class='meta_author'>Post Author : <b style='color: green; font-weight:normal;'><data:post.author/></b></span>
<span class='meta_categories'>Categories:  <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag' style='color: green;'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></span>
</div>

Nota: Se você deseja quer que apareça somente na página inicial, use o código abaixo.

div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='postmeta-primary'>
<span class='meta_date'>Postado:<b style='color: green; font-weight:normal;'>

<data:post.timestamp/></b></span>
&amp;nbsp;<span class='meta_author'>Autor:<b style='color: green; font-weight:normal;'><data:post.author/></b></span>
<span class='meta_categories'>Categories:<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag' style='color: green;'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></span>
</div></b:if>

8. Agora clique em Salvar modelo e está feito.

Qualquer duvida, use a área de comentários.