Colocar imagem com número de comentários

Colocar imagem com número de comentários:

Vamos em Layout -Html e clique em expandir modelo e procure por:

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

Antes desta linha acrescente:

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

Hospede a imagem que você vai utilizar e copie o directy link e cole no bloco de notas:

Agora procure por:

* Comments

Logo após acrescente:

.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 */
}

Verifique se está tudo certo e salve!!