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

Hoy gente , até que fim eim , o tão esperado tutorial saiu!

Hoje vou ensinar vocês à adicionarem algo que está super na moda , antes nem todos blogs davam muita atenção pra isso mas hoje virou quase um sonho de consumo , até eu pesquisei uns dias até entender e poder postar aqui, eu tentei explicar bem breve pois os tutoriais que vi , não ensinam como você alinha o balão e também não dão modelos e dei um jeito.Então vocês vão aprender como colocar um balão com o número de comentários do deu blog ao lado do título da postagem , e olha , não é complicado eu consegui depois de um tentativa hihi , mas vamos ao que interessa não é ? clique em continuação pra ver o tutorial.
Primeiro devo lhes informar que não é nada fácil encontrar balões que te agradem eu tive que personalizar um para poder dar certo.Então eu personalizei dois com alguma cores para facilitar pra você certo ?

Modelos que personalizei :

        
       

Aconselho usar os balões acima para conseguir o tutorial :)

 

•Bom antes de escolher o seu modelo e cor de balão , direcione-se para Design - editar html do seu blog e na página do código html , marque a opção '' expandir modelos de widgets ''

Agora pressione as teclas :  Ctrl + F
e procure por :

]]></b:skin>


•Quando o código aparecer , logo acima dele coloque o código abaixo substituindo a parte em vermelho pela url do seu modelo de balão :


.comment-bubble { 
float : right; 
width : 87px; 
height : 52px; 
background : url(http://2.bp.blogspot.com/_FXzEEWZ1MpY/TSPivDNRLmI/AAAAAAAABYY/_6APiNC397g/s1600/comentarios-69.gif) no-repeat;
font-size : 32px; 
margin-top : -19px; 
margin-right : 10px; 
text-align : center; 
position:rigth; 
}




DEVERÁ FICAR ASSIM :

•Depois de substituir , a url do seu balão
pressione novamente as teclas : Ctrl + f
e procure por :

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


•Quando ele aparecer , logo ABAIXO dele coloque o seguinte código :


<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>

DEVERÁ FICA ASSIM :

Bom , agora visualize , e se o balão tiver certinho , salve , se não estiver bastar conferir os números e ajustá-los novamente , ou então clique em limpar edições e refaça.Espero que consigam pois é fácil basta apenas a atenção.

                                                                                        Tutoriais feitos por Trechy Teen// Blog Oficial