Mostrando o número de comentários nas postagens do Blogger

Compartilhar:
Olá amigos do Categoria Blogger! Hoje aprenderemos a adicionar um link com a quantidade de comentários que contém numa postagem. Este código é no formato de balão, lembrando que esta postagem é um pedido do nosso leitor W.A Informática. Vamos ao tutorial?

1. Acesse a guia Modelo de seu blog e clique no botão Expandir modelos de widgets. Logo depois, pressione Ctrl+F para abrir o Localizador do seu navegador e procure por um dos códigos abaixo.

<class='post-title entry-title'>

ou;

<b:includable id='post' var='post'> 

2. Depois de achar um dos códigos acima, cole imediatamente abaixo dele o código a seguir. Faça as modificações nos locais indicados.

<span class='post-comment-link-post' style='background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<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 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span> 

Na parte destacada de vermelho, altere o estilo do balão (uma imagem). E nas partes destacadas de azul, altere a posição do balão.

3. Caso queira alterar a cor do link do número de comentários, pressione novamente Ctrl+F e procure pelo código a seguir.

body

Para não se confundir, esta tag body é a que dá personalização ao corpo do blog.

3.1. Logo acima dela, você colocará o seguinte código fazendo modificações necessárias.

.post-comment-link-post a{color:#fff;font-size:14px;}
.post-comment-link-post a:hover{color:#222;text-decoration: none;} 

Clique na imagem para ampliar
4. Logo após, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Espero que tenha conseguido, principalmente o W.A Informática. Até a próxima pessoal.
► Postagens Relacionadas:

9 Comentários

Editor-chefe disse...

Cara fica só balão sem número. E agora?

11 de maio de 2012 às 21:43
João Almeida disse...

Estou analisando o código e assim que possível entrarei em contato com você.

11 de maio de 2012 às 21:56
Editor-chefe disse...

Blz. Lembre-se que uso o Disqus.

11 de maio de 2012 às 22:01
Ataliba_Leonel disse...

Instalei no meu blog e funcionou certinho, mas depois eu vi que ele contabilizou apenas os comentários do sistema nativo do Blogger, o que apareceu depois via Disqus ele não contabilizou no meu tbm =/
Mas para quem não está usando Disqus, funciona perfeitamente, recomendadíssimo!

10 de junho de 2012 às 15:35
João Almeida disse...

Obrigado pelos elogios ao artigo. Acabei me esquecendo de colocar esta nota no artigo. Ele não contabiliza o número de comentários no DISQUS não, somente os que fazem pelo Blogger.

10 de junho de 2012 às 17:58
Mod Júnior disse...

Poxa show de bola, gostei muito desse post e deu certinho aqui! Só procurando um tamanho de imagem menor, pois fui mexer no "width:48px; height:48px" mas nao deu certo! hehe Mas vlw

5 de setembro de 2012 às 01:01
João Almeida disse...

rsrsrs Ficamos alegres que tenha conseguido e volte sempre.

5 de setembro de 2012 às 12:54
Eduardo Fontana disse...

Olá João. Peguei um template que tem essa ferramenta e gostaria de retirá-la, como posso fazer?

14 de fevereiro de 2013 às 14:57
Bruno Bezerra disse...

Bela matéria João. Eu sei como resolver aquele problema de ''numeração'' de comentários com o sistema DISQUS. Quando você está ná área de administração de sua conta, onde tem Dashboard, é só clicar onde tem comments, e depois colocar a numeração ''0''!.

17 de janeiro de 2014 às 11:34

Postar um comentário