Colocar balãozinho com comentários

Para fazer essa alteração entre na pagina editar html, marque a opção expandir modelos de widgets e procure por: <class='post-title entry-title'> ou <b:includable id='post' var='post'>. Qual deles usar depende do modelo do seu template geralmente os templates novos usam a primeira opção.

Então logo depois coloque este código:

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


Agora vamos falar sobre os ajustes necessários e como >trocar a imagem do bolão nos comentários do blog, veja esse trecho do código:

style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfDWBVk2u1E7JxR8K90bWfXVla7GgmelB1wX7KCybOtG7dPOz5jtDSgvEDhKDuY4SLzgCgnScZUf6HsuVxEXYTsUnx-QsLdSLidxjIUC3mLU6FHk080ungWH3V4qmyn1wGX_JDGpgn2s/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; padding-top:8px'

Aqui está toda a formatação de texto e posicionamento da imagem, então vamos por partes:

Trocar a imagem de fundo (balão)
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfDWBVk2u1E7JxR8K90bWfXVla7GgmelB1wX7KCybOtG7dPOz5jtDSgvEDhKDuY4SLzgCgnScZUf6HsuVxEXYTsUnx-QsLdSLidxjIUC3mLU6FHk080ungWH3V4qmyn1wGX_JDGpgn2s/s400/bubble.png) no-repeat top right; width:48px; height:48px;

Isso é a imagem de fundo, então troque o endereço https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfDWBVk2u1E7JxR8K90bWfXVla7GgmelB1wX7KCybOtG7dPOz5jtDSgvEDhKDuY4SLzgCgnScZUf6HsuVxEXYTsUnx-QsLdSLidxjIUC3mLU6FHk080ungWH3V4qmyn1wGX_JDGpgn2s/s400/bubble.png pela url de outra imagem que goste mais ou combine melhor com o seu template, você pode achar uma imagem no google, fazer um com um programa para edição de imagens ou achar icones prontos, depois hospede a imagem e coloque o endereço da imagem no código acima. (caso tenha duvidas leia: Imagem não aparece).

Os dois valores 48 é o tamanho da imagem, então deve fazer os ajustes com o tamanho da nova imagem que utilizar.

Posicionar corretamente o número de comentários dentro do balão
padding-top:8px esse é o espaço acima do numero, portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo), na direção horizontal está centralizado automaticamente.

Formatação do Numero de comentários (texto)
Para formatar o texto, ou seja, o numero que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no inicio do html do blog, junto com o trecho body. Veja Onde colocar os códigos no blog.



Então coloque esses estilos CSS para formatar os links:

.post-comment-link-arriba a{color:#fff;font-size:18pt}
.post-comment-link-arriba a:hover{color:#ff0;text-decoration: underline overline}

Veja aqui como Alterar cores dos links - CSS e também outras opções de formatação de texto
Créditos:http://www.dicasparablogs.com.br