Como numerar os comentários no novo blogger

Como vocês já sabem, desde que o blogger lançou o novo sistema de comentários com a opção de respostas(Threaded Comments), todas as configurações feitas anteriormente deixaram de funcionar.
Há um tempo atrás, eu publiquei um tutorial ensinando a numerar os comentários no blogger. Ocorre que, aquele tutorial não se aplica ao novo sistema de comentário.

Sem muito blábláblá, hoje venho apresentar uma alternativa para numerar os comentários no novo sistema do blogger, que na minha opinião é muito mais funcional, além de mais leve.

No painel do blogger, acesse o menu “modelo“, clique em “editar html” e procure pela tag: ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

/* contador comentarios
------------------------- */
.comments .comments-content {
counter-reset: contadorcomentarios;
overflow: hidden;
position: relative;
width: 100%;
}
.comments .comment-block:before {
color: #C0C0C0; /*--- cor da fonte da numeração do comentario--- */
content: counter(contadorcomentarios, decimal);
counter-increment: contadorcomentarios;
font-family: Helvetica;   /*--tipo da fonte--*/
font-size: 20px; /*--tamanho da fonte--*/
font-weight:bold;
position: absolute;
right:2px;
top: 5px;
}

Salve as modificações.
No código acima, eu identifiquei e destaquei os trechos para que você possa alterá-los conforme preferir.

Caso você tenha personalizado os comentários do seu blog, seguindo o modelo publicado no tutorial Personalizar comentários no novo blogger, você precisará fazer uma pequena alteração no trecho referente a: .comments .comments-content .icon.blog-author.

Veja como:
Acesse o menu "modelo", clique em “editar html” e procure por:

.comments .comments-content .icon.blog-author{
background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
width:18px;
height:18px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}

SUBSTITUA o trecho acima, por este:

.comments .comments-content .icon.blog-author{
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
padding: 0  0 0px 2px;
}

Prontinho!
Os comentários no seu blogger já estão numerados.
E então? Gostou do tutorial?