Contador de Comentários no Titulo dos Posts

Dando segmento a personalização dos comentários no blog, hoje vou mostrar como destacar no titulo do post a quantidade de comentários que cada postagem recebeu, incluindo um contador de comentários em forma de balão no título dos posts.
É uma boa opção de mostrar a seus leitores quais os artigos publicados tiveram mais participação dos usuários.

Demo

Neste tutorial você vai aprender a incluir um contador de comentários onde a quantidade de comentários recebidos em cada postagem aparece ao lado do título de cada post, dentro de uma imagem, em forma de um balão.

No painel do Blogger, acesse o menu “modelo” e entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole ANTES dela o código a seguir:

.numComments {
background: url(ENDEREÇO-DA-SUA-IMAGEM) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
margin-top : -15px;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #fff;
}
.numComments a:visited{
color: #fff;
}

Agora procure por:

<b:if cond='data:post.title'>

Cole o código a seguir logo ABAIXO:

<span class='numComments'>
<a expr:href='data:post.url'>
<data:post.numComments/></a></span>

Agora é salvar as alterações!

No Código CSS você pode editar alguns elementos de acordo com seu gosto.
Vamos identificar cada elemento, para facilitar possiveis alterações, caso queira fazer:

float:right; ? Posição do elemento á direita
padding: 10px 0 0 0; ? Posicionamento da numeração dentro da imagem
margin-top : -15px; ? Posicionamento da imagem ao topo
font-size: 150%; ? tamanho da fonte da numeração
width: 50px; ? largura da imagem (deve ser a mesma que corresponde a imagem)
height:50px; ? altura da imagem (deve ser a mesma que corresponde a imagem)
color: #fff; ? cor da fonte da numeração