Como Adicionar Data, Autor e Marcadores Abaixo do Titulo do Post

• minutos de leitura

Índice

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPzK2jwfXz8nEeFH6az14ABkOymZdqcAbXaPQ1tQaG4HYGr0D5jIm1h0TS0nIxWAKFyR-ULFpG0hFJDVS2KyceRYrJQ0Gz0bfvV0BGqS-r74yW0TBHmksPFZoNDJWYDxBB6ZGqDUeZMTX/s1600/time.png)}
.meta_author{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_ixbvDdcUP7-i-CVf-S2r6Z_SaGH0PWtbqt2v8hZ_WR9TzbHGTyHHnCiPPplbtgJbi0ENOHlwyYX3B5OoXL4CoH8qmKAqIOLGw5nYeijue2YlWhVBvbFg6hxfnMDZ3txHdFz1TsJILvz/s1600/author.png)}
.meta_categories{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOszx5DoA-HqlFJrrIqRew6d2LvX217W8gZENLPnyi8_zbJiML9CbhoPchMPC9R42FQmYUQvIt1SvFFU5GBf-wvd1YPkbofuB2JvS78RGKgjYBB771bAsXrIxrFzCOZH5yi9CSaoFTNxA9/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.