Balão com número de comentários ao lado do título da postagem

Uma boa maneira de conseguir espaço e mostrar bem grande o número de comentários, é colocando um balão do total de comentários ao lado do título da postagem. Além de deixar o estilo bonito e limpo, fica bem nítido o seu total de comentários, incentivando os leitores a comentarem.

1. Instalação
No painel do Blogger, escolha seu blog, clique no menu "Design" > "Editar HTML" e marque a caixinha "Expandir modelos de widgets".

Agora procure (Ctrl+F) pelas tags <b:includable id='post' var='post'> ou <class='post-title entry-title'>, dependendo de seu modelo de template, e adicione o seguinte código DEPOIS de uma das tags encontradas:

<span class='post-comment-link-arriba' style='background: url(http://png.findicons.com/files/icons/829/quartz/64/comment.png) no-repeat top right; width:64px; height:64px; 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' style='text-decoration:none; color:#666666;'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

2. Personalização
Agora está tudo feito, só falta deixar o balão ao seu gosto. A parte em vermelho do código, é o endereço URL da imagem do balão. Você pode escolher qualquer imagem de balões da internet e colocar o endereço URL substituindo a parte vermelha. Mas atenção, para que o novo balão colocado fique perfeito, mude os valores em azul de acordo com a sua imagem. Se sua imagem é do valor 48x48, faça o mesmo, altere width:64px; height:64; para width:48px; height:48;.

A parte em verde do código representa o estilo css do link do balão. Você pode alterar a cor do link, modificando color:#666666; para um preto, ficando color:#000000;. O estilo css fica ao se critério, tanto quanto as outras modificações.

Sites para encontrar ícones de balões:

• FindIcons
• IconFinder