Balão de número de comentários ao lado do titulo da postagem

Um balão com o número de comentário deixado em um post em seu blog, já pensou?
Essa ferramenta, é muito bom, pois além de dar um aspecto elegante ao seu blog, pode atrair mais comentários, ou até mesmo estimular os seus leitores lerem o que outras pessoas deixaram de comentários em um post seu.
Isso deixa seu blog ainda melhor e muito mais bonito.



Veja abaixo uma imagem de exemplo:

 Link do Tutorial da imagem acima Aprenda como colocar Postagens Populares em seu blog

Para colocar esse código no seu blog, siga as instruções abaixo:

1º - Entre no Painel de controle de seu blog, vá em Design >> Editar HTML e selecione a opção "Expandir modelos widgets".

2º - Agora pressione as teclas Ctrl+F e procure pela seguinte linha abaixo:

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

ou se não encontrar o código anterior, procure pela linha seguinte;

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

ou apenas por;

 post' var='post'>

 Os códigos que eu citei acima, depende de seu template, geralmente os templates novos usam a 2ª opção.

Logo depois que coloque o código abaixo da linha encontrada:

 Balão 1

<span class='post-comment-link-arriba' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWcYQCrpZgQOE5LjN-MfYFku_NxAUr2SZIFPG3h6Bt3RWRijDQgcNyiQ3V44ZAb3Gtu3s74ITtrzRA3VtQwdltPKc0zJPO9yI4VJ9fuwdPuKnyPu0STRMXhPNJg2Soj6PoRPUtCxMNu9U/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>

 Balão 2

<span class='post-comment-link-arriba' style='background: url(http://2.bp.blogspot.com/-phyi-tUekDs/Tqw8b_F_qgI/AAAAAAAAAZE/cAB47dRdDQU/s1600/chat-icon.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>

Disponibilizamos estes 2 balões, que ficam ótimos na maioria dos templates.

Caso você gostaria de trocar a imagem do balão, você terá que fazer o seguinte:

A parte sublinhada em vermelho, você poderá substituir por outra imagem do balão.

• Site de ícones Findicons e IconArchive

Como posicionar corretamente o número de comentários dentro do balão
A tag padding-top:8px é responsável pelo posicionamento do nº de comentário dentro do balão, para isso altere esse valor por outro, e antes de salvar o modelo clique em visualizar para ver se está sendo centralizado (no meio do balão).


Qualquer dúvida, deixe nos comentários.

Créditos ao Dicas para Blog