Tutorial: Balões na quantidade de comentários

Imagem do blog Menina Nerd

O tutorial de hoje vai ensinar como colocar esse balãozinho tão desejado em muitos blogs,é super simples e ajuda muito,pois incentiva que o leitor comente além de dar um "UP" no visual do blog. Vamos ao tuto?


Primeiro vá em Modelo > Editar HTML > Marque a caixinha "Expandir modelos de widgets" > De Ctrl + F e procure por:  <class='post-title entry-title'>  
Se não encontrar,procure por: <b:includable id='post' var='post'>
Depois coloque o código a seguir embaixo da primeira ou da segunda tag destacada.

<span class='post-comment-link-arriba' style='background: url(URL DO SEU BALÃO) no-repeat top right; width:90px; height:80px; text-align:center; float:right;padding-top:19px'>

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

O código destacado em verde,como o próprio título diz,é a URL do balãozinho que deve ficar sobre a quantidade de comentários. Você pode criar o seu próprio balão,ou pode usar os balões abaixo que encontrei no Jackie Dream.



             

 Entendendo o código:
     
 Em: width:90px -  É a largura.
 Em: height:80px - É a altura.

 Em: padding-top:19px -  É o numero de comentários que fica dentro do balão,por isso altere essa quantidade até o numero de comentários ficarem na posição correta, lembrando que esse código muda a posição no sentido vertical (pra cima e pra baixo)