Balão com número de comentários

Como vocês devem ter percebido, mudei a forma como o número de comentários é exibido. Para isso, usei um tutorial da Rô publicado no Blog à La Carte. Vamos a ele?

- Entrar em Layout, mancar expandir modelos de widgets;

- Procurar pela linha (digite Ctrl+F) <b:if cond='data:post.title'>

- Sob essa linha, cole o código abaixo:

<span class='numComments'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'>
<data:post.numComments/></a>
</b:if>
</span>

Em seguida, apliquei estilos à nova "class".

Obs.: Hospede uma imagem como a que usei num site e copie o link. Uma sugestão é buscar um ícone no Iconspédia.

- Procure por /* Comments e abaixo cole o código:

Código fornecido pela Rô:

.numComments {
background: transparent url(http://endereço da imagem) no-repeat top right;
float:right; /* flutua o balão à direita */
text-align: center;
margin: -10px 23px 20px 0px; /* coloque as medidas de acordo com seu template */
padding: 8px 0 0 0; /* padding para imagem de 50px por 50px */
font-size: 150%; /* fonte para imagem 50 x 50 */
width: 50px; /* largura da imagem */
height:50px; /* altura da imagem */
font-family: Georgia, Sans-serif; /* fonte para o número */
}
.numComments a:link{
color: #f8f8f8; /* cor do número para link ativo */
}
.numComments a:visited{
color: #ff6600; /* cor do número para link visitado */
text-decoration:none;
}
.numComments a:hover{
color: #ff6600; /* cor do número com mouse-sobre */
}

Código que estou usando:

.numComments {
background: transparent url(http://dl.getdropbox.com/u/664055/Template%20-%20M%C3%ADnima/Chat_48.png) no-repeat top right;
float:right; /* flutua o balão à direita */
text-align: center;
margin: -10px 23px 20px 0px; /* coloque as medidas de acordo com seu template */
padding: 8px 0 0 0; /* padding para imagem de 50px por 50px */
font-size: 150%; /* fonte para imagem 50 x 50 */
width: 50px; /* largura da imagem */
height:50px; /* altura da imagem */
font-family: Georgia, Sans-serif; /* fonte para o número */
}
.numComments a:link{
color: #f8f8f8; /* cor do número para link ativo */
}
.numComments a:visited{
color: #f8f8f8; /* cor do número para link visitado */
text-decoration:none;
}

Obs.: preferi alterar o código deixando-o como está acima. Assim, o número fica sempre branco, mesmo quando o mouse está sobre ele. Se quiser uma outra cor, use o site Color Combos.
Não se esqueça ainda de dimensionar corretamente a imagem.

- Mesmo fazendo tudo isso, a indicação do número de comentários permanece abaixo da postagem. Para retirá-la, elimine o trecho abaixo:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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 Comentário><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

É isso. Não deixe de visitar o blog onde está o tutorial, mas como todos sabem, a Rô, agora, escreve no Bloggersphera.