Colocar Balão com Número de Comentários ao Lado do Título do Post

Aperfeiçoe o design do blog colocando balão com número de comentários ao lado dos títulos das postagens.

Um design organizado é sempre um ponto a favor do blog visitado. Como na web atual a concorrência é cada vez mais acirrada, se você visita um blog em busca de algo importante e se depara com um visual todo desorganizado, logo sairá. O que muitos não sabem é que essas “visitas rápidas” acabam prejudicando totalmente o blog em questão, sendo considerado irrelevante para o Google.

Balão com Número de Comentários com Imagem a seu Gosto

Nesse artigo, trazemos um ponto bem interessante a ser aplicado no blog e que ajudará na organização e informação. Colocar balão com número de comentários ao lado do título dos posts. Esse passo além de ajudar no design adotando um ponto visual a mais a ser adaptado ao design, também serve como informativo para que os visitantes saibam que aquela postagem é bastante comentada e qualquer dúvida que ele tenha “a resposta” pode estar logo ali.

Falando um pouco mais sobre o design, outro aspecto importante a ser citado, é que você poderá colocar qualquer imagem de “balão” que ficará com a quantidade de comentários. Imagem essa, que poderá ser alguma criada por você próprio ou aquela que você encontrou na internet e achou interessante seu estilo, ponto a favor para deixar seu blog mais bem caracterizado. Apenas com uma ressalva, recomendamos que a imagem tenha a proporção de 48x48px.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar Balão com Número de Comentários ao Lado do Título do Post do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por  ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcTmSzC8kIVKdU908qbng_zD2dpgwhx-gCvWIcGQZ8fqES5MJ5WTuUqp1uJcuqBo2pshlzYSLC_1kfdd1S758pd4H5VljLpdFfA7L1pU59ltZayLYywB4JHvqzhKCcsfG2v5ZDYhR-BugU/s1600/comment+bubble2.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

* Destacado em VERMELHO, é a imagem do "balão" dos comentários, caso desejar substitua por outra.

>> Pesquise agora por:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

ou

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

>> Logo ABAIXO do trecho encontrado, cole o seguinte código:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

* Destacado em AMARELO, é o estilo do número de comentários dentro do balão (cor da fonte, tamanho da fonte, e estilo negrito).

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a finalização do processo, seu blog já terá mais uma personalização aplicada a seu gosto e estilo, proporcionando uma maior identificação com seu objetivo e possibilitando uma "produtividade visual" mais específica se equivalendo em design aos melhores sites e blogs atualmente conhecidos.

Deixe seu comentário pois ele é a motivação para nosso trabalho.