Número de comentários dentro de um balão

Imagem: Jana

Oi leitoras! Hoje vou ensinar vocês a colocarem o número dos comentários dentro de um balão que fica do lado do título do post. Clique em Continuar Lendo para ver o tutorial:

Antes de começar o tutorial, você precisa de um balão em Gif. Veja os modelos que eu fiz:

 
 
Se quiser fazer um personalizado, pegue um desses modelos e personalize, mas não mude o tamanho.

Tutorial

1. No Blogger, vá para Design >  Editar HTML.
2. Marque a caixinha 'Expandir modelos de widgets'.
3. Tecle Ctrl F e procure por:

]]></b:skin>

4. Logo acima dessa parte, cole o código abaixo:

.comment-bubble {
float : right;
width : 87px;
height : 52px;
background : url(URL DO BALÃO) no-repeat;
font-size : 32px;
margin-top : -19px;
margin-right : 10px;
text-align : center;
position:rigth;
}

5. Agora substitua a parte em vermelho pelo URL do seu balão.
6. Tecle Ctrl F e procure por:

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

7. Quando encontrar, cole o código abaixo logo abaixo dele:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

8. Visualize. Se o número estiver desalinhado, mude os números em azul do primeiro código.

Gostou do tutorial? Queria mais alguma coisa? Comenta.