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 qualquerimagem 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 de48x48px.

 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/AVvXsEjGeH93XZ2FbjmbxvR_0h53Z6Z-4Pv2G2GDtPUBD9XPvO7VVrLn0QXAhdWJuUWR9CawvUru9tHln8erDZ5lG5cFHfUP2tKQewp6pFFtvwfp9QkQpzkm_-sv9S48KNrSNuB1-GDLociZWA5Y/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.