data,autor,marcadoresProvavelmente 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.

8 Comentários

Os comentários deste blog são todos moderados, ou seja, eles são lidos por nós antes de serem publicados.

Não serão aprovados comentários:

1. Não relacionados ao tema do artigo;
2. Com pedidos de parceria;
3. Com propagandas (spam);
4. Com link para divulgar seu blog;
5. Com palavrões ou ofensas a quem quer que seja.

ATENÇÃO: Comentários com links serão excluídos!

  1. como mostro somente na pagina inicial?

    ResponderExcluir
    Respostas
    1. Olá Márcio, tudo bem?

      Por favor dê uma olhada no artigo que eu fiz a atualização com a opção: mostrar só na página inicial.

      Qualquer duvida, não hesite em perguntar.

      Abraço

      Excluir
  2. Gostaria de entrar em contato com vossa pessoa, como poderia fazer?

    ResponderExcluir
  3. Gostei do tutorial, mas eu queria sem essa personalização, queria normal, usando a fonte padrão e tudo mais, tem como?

    ResponderExcluir
  4. Ótimo tutorial, me ajudou a edita um template q tava sem o nome do autor, muito obrigado :D

    ResponderExcluir
  5. oi eu achei o seu tutorial muito bom e quero muito usar ele no meu novo templete, mas a data não aprece no post o que esta aparecendo é o horário sera que fiz algo de errado?

    ResponderExcluir
  6. Olá! A cor da fonte é verde. Tem como mudar essa cor... Não estou conseguindo!

    ResponderExcluir

Postar um comentário

Os comentários deste blog são todos moderados, ou seja, eles são lidos por nós antes de serem publicados.

Não serão aprovados comentários:

1. Não relacionados ao tema do artigo;
2. Com pedidos de parceria;
3. Com propagandas (spam);
4. Com link para divulgar seu blog;
5. Com palavrões ou ofensas a quem quer que seja.

ATENÇÃO: Comentários com links serão excluídos!

Postagem Anterior Próxima Postagem