Balão com número de Comentários

Galera, hoje velho trazer uma coisa interessante, vou ensinar a colocar um balão com número comentários no titulo da sua postagem, essa é uma das maneiras de você ter mais comentários nas suas postagens, pois fica mais visível e mais chamativo no titulo da post. Vamos lá, não é tão difícil.

Demonstração
*Atenção: não ficará posicionado o link do comentário abaixo do balão, este tuto é apenas para posicionar o balão, caso queira posicionar os comentários abaixo do balão confira este tutorial: Mover dados do Post-Footer
Primeiramente vamos procurar uma balão que esteja mais favorável ao tema do seu template, eu recomendo o Icon Finder, não só para procurar o balão para os comentários, e sim para qualquer tipo de icon.

Agora vamos adicionar o html... vamos lá:

1º - Vamos em, >> Design >> Editar HTML >> Expandir Modelos >> procure pela tag:

<class='post-title entry-title'> ou <b:includable id='post' var='post'>
(geralmente é usado a primeira opção)

Abaixo da DIV encontrada adicione o seguinte código:

<span class='post-comment-link-arriba' style='background: url(URL DA IMAGEM DO SEU BALÃO) no-repeat top right; width:XXpx; height:XXpx; text-align:center; float:right; margin-right: 27px; margin-top: 12px; padding: 4px 2px 0px 0px; font-family: arial; font-size: 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>
Primeiramente estipule o tamanho do icon, com:

width:XXpx; /* Para a largura */
height:XXpx; /* Para a altura */
Posicione o balão com o seguinte HTML do código:

float:right; /* Edite a flotagem do balão */
margin-right: 27px; /* Posicione o balão em relação com a floatagem */
margin-top: 12px; /* Posicione o balão em relação com o topo e o footer */
Agora basta posicionar o número dentro do balão:

padding: 4px 2px 0px 0px; /* Cima, Direita, Baixo, Esquerda */
Agora vamos tirar a numeração do link dos comentários(que seria esta >> [0] Comentários), procure pela seguinte tag:

<span class='post-comment-link'>
*obs: será o primeiro que encontrar.

O código do link dos comentários todo será este:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 <data:top.commentLabel/><b:else/><data:post.numComments/>] Comentários</b:if></a>
</b:if>
</b:if>
</b:if>
</span>
Basta a pagar a seguinte parte:

== 1'>1
Que seria os sinais de igualdade >> == <<, e a numeração >> 1 <<.

E as: >> [] <<... que ficará assim:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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'><data:top.commentLabel/><b:else/><data:post.numComments/> Comentários</b:if></a>
</b:if>
</b:if>
</b:if>
</span> É isso ai pessoal, espero que tenham gostado! Qualquer dúvida... contate-me pelo chat ou se preferir comente.