Normalmente o número de comentários de cada postagem do blogger é exibido de forma muito tímida e as vezes imperceptível pelo leitor. Se seu blog é recente como o meu e não tem um grande número de
comentaristas ainda não tem problema. As chamadas " bolhas de comentários " são excelentes para chamar a atenção dos leitores a comentarem nas suas postagens. Existem os leitores que sentem-se motivados a comentar quando existe um grande número de pessoas que já comentaram e outras que adoram ser os primeitos a comentar. Tudo isso é muito relativo. Além disso o look do blog fica muito bonito e profissional. Dê uma olhada no look do Cabeça de Blog e veja se instalar este widget te interessa. Seguem os passos:

  • No painel do seu blogspot clique em na aba Layout > Editar HTML > e marque a caixinha Expandir modelos de widgets.
  • Antes de começar clique em Baixar Modelo completo do template.
  •  No seu teclado clique CTRL + F e na caixa de pesquisa que se abrirá procure pelo seguinte código:

]]></b:skin>

ACIMA do código fornecido anteriormente, copiar e colar o seguinte código:

/*------CommmentBubble Start------*/
comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWc4NdF533szwdA7bPP-YU1GEnRr4OmJUSIGlOGH_A7p7FEyZtJMin0co8GKGHT6l5yciw6FQz13CT0Cpk1ig5G4K7S2oM_4uC1sOjF_pE9RlJ1oNReA2ffWHxlUJEfgpKwBrXb4H8Jt-/)
no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}
/*------Commment Bubble End Cabeca de Blogger------*/


Agora procure pelo seguinte código:

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

Consequentemente baseado no código acima você verá todo o seguinte código:

<b:includable id='post' var='post'><div class='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<h2><a
expr:href='data:post.link'><data:post.title/></a></h2>
<b:else/>
<b:if cond='data:post.url'>
<h2><a
expr:href='data:post.url'><data:post.title/></a></h2>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Imediatamente AO LADO do código:<h3 class='post-title entry-title'>  destacado acima ,copie e cole o seguinte código:

<b:ifcond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

Se você colou o código no local correto, ele ficará posicionado mais ou menos assim:
<b:includableid='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'><h3 class='post-title entry-title'><b:ifcond='data:post.allowComments'><aclass='comment-bubble' expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>

<data:post.numComments/></a></b:if><b:if cond='data:post.link'><aexpr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><aexpr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Pronto! Clique em visualizar e se não deu nenhum erro em seu template clique em Salvar.

Obs: Se você preferir trocar o modelo da bolha do widget para uma do seu gosto, basta localizar o seguinte código:

background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWc4NdF533szwdA7bPP-YU1GEnRr4OmJUSIGlOGH_A7p7FEyZtJMin0co8GKGHT6l5yciw6FQz13CT0Cpk1ig5G4K7S2oM_4uC1sOjF_pE9RlJ1oNReA2ffWHxlUJEfgpKwBrXb4H8Jt-/)

E substituir o trecho em azul pelo endereço da imagem de sua preferência no tamanho recomendado de 48x48 px. 

Agradecimentos: Introblogger

Cabeça de Blogger

Sobre o Autor:
Edu Gomes Edu Gomes:Fundador e editor do Cabeça de Blogger, nada mais que um cara sexy e rico que sempre se decepciona quando acorda e percebe que tudo não passou de um sonho. Gosta de variedades e odeia fazer planos.{saiba + sobre o autor}