Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo
Link do Tutorial da imagem - Paginas extras para o Blogspot
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(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/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(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/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(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px;
Isso é a imagem de fundo, então troque o endereço http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/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
Fizemos esse tutorial depois de receber um cometário falando sobre o assunto, pois em meio a tantos assuntos que já tratamos aqui no Dicas para Blogs esse de colocar o numero de comentários ao lado do titulo do post ainda não tinha sido mostrado. Esperamos que gostem deste tutorial e seja útil para outros blogueiros também.
