Numerar los comentarios anidados de Blogger con imagen

Hace un tiempo que salieron los comentarios anidados de Blogger y en ese tiempo vimos como agregar dichos comentarios así como también vimos como numerarlos, pero en aquella ocasión era una simple numeración con pocos aspectos personalizables ya que solo mostraba el numero del comentario y ya, pero en el día de hoy y gracias a un poco de CSS podemos añadir una imagen de fondo al numero y otras cosas mas.

Para agregar este truco a tu blog ve a Plantilla, Editar HTML, y busca lo siguiente:

<b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8MQLDkERKtEOwrm-lZItmnGhfb7NelgUAyJh2lOspMKqbugLzBOU1hiER6-y18OKbZmp6kFveJHFNdIK6Gnq76NPTkSDymSvsaqejvw7see-E2EGJ0mrY_laZcbVK8vvGcOnZi_Aju4o/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Los valores resaltados son lo que se pueden personalizar, y lo resaltado en color negro corresponde a la URL de la imagen del numero, la cual puedes reemplazar por la que tu quieras.

Espero que te haya gustado este truco y si quieres seguir recibiendo los mejores trucos para tu blog no olvides visitarnos regularmente y así podrás enterarte de las ultimas novedades de Blogger.