Como colocar Balão com Número de Comentários ao Lado do Título da Postagem

Aprenda a colocar aquele pequeno e famoso "balão com números de comentários" no seu blog. Esse balão é bastante utilizado por muitos blogueiros, creio que você já deve ter visto um desses em algum Blog pela internet. O legal desse recurso, é que, você pode deixar a aparência do titulo da postagem diferente tirando aquele vazio e ao mesmo tempo deixando visível a quantidade de comentários publicados na postagem...



Para colocar esse  Balão no Blog é bastante fácil, nós iremos fazer algumas alterações no HTML do seu Blog.

Como Colocar Balão com números de Comentários no Blog

1º Passo: Acesse o Painel de edição do seu Blog, em seguida clique na opção MODELO >> depois em EDITAR HTML.

2º Passo: Depois de abrir o HTML do seu blog, clique em qualquer parte do código, e depois pressione as teclas de atalho Ctrl+F no seu teclado. No campo de pesquisa que se abriu, busque esta seguinte Tag mostrada logo abaixo:

Encontre esta Tag: <class='post-title entry-title'>

Se não encontrou busque esta outra Tag: <b:includable id='post' var='post'>

Observe: Para cada modelo haverá uma Tag diferente, então basta você encontrar uma das duas Tags mostrada logo acima, certo!

3º Passo: Após ter encontrado a Tag, logo abaixo da mesma cole este seguinte código:

<span class='post-comment-link-arriba' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyVJYA0pP1qcTpJ-N66gMzuk7SrqpzhyUcuWmyztdg8l2iNbc5ttQNYDF4kU5mmrUo5JGU7LspURu5cNefi87epc5l5P22l4lHtTJUSGu09ULj-eotm-YtoiEIbKazRt4RIjJYXatLT4/s400/bubble.png) no-repeat top right; width:48px; height:48px; 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'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a> 
</b:if> </span> 

4 º Passo: Agora, clique em Visualizar Modelo para verificar se não vai haver nem um Erro, depois só Salvar Modelo e já estará tudo pronto.


Mudar a imagem do Balão de Comentário
Observe: Caso deseje mudar a imagem do Balão, basta você editar uma imagem com cores diferenciadas do jeito que preferir, mas a imagem deve seguir as mesmas proporções da imagem utilizada neste balão.

Depois, é só hospedar a sua imagem no seu Blog e, em seguida substituir o link da imagem do código pela sua imagem, fácil né!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyVJYA0pP1qcTpJ-N66gMzuk7SrqpzhyUcuWmyztdg8l2iNbc5ttQNYDF4kU5mmrUo5JGU7LspURu5cNefi87epc5l5P22l4lHtTJUSGu09ULj-eotm-YtoiEIbKazRt4RIjJYXatLT4/s400/bubble.png

Então é isso Galera! espero que tenham gostado deste tutorial, queria que deixassem comentários dobre o Balão de Comentário... Não esqueçam de curtir nossa página no Facebook e de seguir nosso Blog, Obrigado.