Mostrando o número de comentários nas postagens do Blogger

Olá amigos do Categoria Blogger! Hoje aprenderemos a adicionar um link com a quantidade de comentários que contém numa postagem. Este código é no formato de balão, lembrando que esta postagem é um pedido do nosso leitor W.A Informática. Vamos ao tutorial?

1. Acesse a guia Modelo de seu blog e clique no botão Expandir modelos de widgets. Logo depois, pressione Ctrl+F para abrir o Localizador do seu navegador e procure por um dos códigos abaixo.

<class='post-title entry-title'>

ou;

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

2. Depois de achar um dos códigos acima, cole imediatamente abaixo dele o código a seguir. Faça as modificações nos locais indicados.

<span class='post-comment-link-post' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-17eYUuq_lGlvPsqsm813c-KVDbhbEQU5PSiZGzAwP1SJ7byCCBnACXGJRle32lvOhHPvbg8X9d0kneqEpzHDbrS5JU_Kdlalva2Z_ea4S8hJ8ryTTSVeVKfwWY_2QYReAygdl4Z_9s/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> 

Na parte destacada de vermelho, altere o estilo do balão (uma imagem). E nas partes destacadas de azul, altere a posição do balão.

3. Caso queira alterar a cor do link do número de comentários, pressione novamente Ctrl+F e procure pelo código a seguir.

body

Para não se confundir, esta tag body é a que dá personalização ao corpo do blog.

3.1. Logo acima dela, você colocará o seguinte código fazendo modificações necessárias.

.post-comment-link-post a{color:#fff;font-size:14px;}
.post-comment-link-post a:hover{color:#222;text-decoration: none;} 

Clique na imagem para ampliar

4. Logo após, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Espero que tenha conseguido, principalmente o W.A Informática. Até a próxima pessoal.