Balões Personalizados com o número de comentários

Olá Gominhas. Hoje eu vou ensinar pra vocês como colocar um balão personalizado com o número dos comentários no seu blog. Ficará mais ou menos assim:

vá no seu HTML   pressione as teclas CTRL+F e pesquise por:   

   <b:includable id='post' var='post'> 

 Então coloque esse código logo abaixo, do código destacado 

<span class='post-comment-link-arriba' style='background: url(http://i.imgur.com/lfGb2.jpg) 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>

Ficando assim: 

Alguns trechos editaveis e como trocar a imagem do balão

 Trocar a imagem do balão no trecho: (http://i.imgur.com/lfGb2.jpg) apague e coloque o link da imagem desejada (só apague onde está grifado de azul)

                


 

''Para pegar o link da imagem é só hospedar ela no site de hospedagem de imagens ok Clique aqui para ir até o site de hospedagem de imagens. "

Thereza eu quero fazer o meu próprio balão pode? Claro mais não se esqueça de ajustar o código para o mesmo tamanho da sua imagem ta! por exemplo as imagens que eu fiz tem a resolução 90x80

- no trecho: Width:90px corresponde a largura 

- no trecho: height:80px corresponde a altura

- no trecho: padding-top:19px Corresponde ao numero que fica dentro do balão portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo)

É isso pessoas! dúvidas comente

Espero ter ajudado Beijos e até a próxima...
Para mais Balões personalizados clique Aqui