Numerar comentarios en tus entradas. (blogger)

Hoy les voy a compartir un truco muy simple realizado con CSS, que servirá para numerar los comentarios y las respuestas. En la foto de arriba puedes ver que  los comentarios se numeran con un número decimal, mientras que las respuestas se numeran con una letra. El diseño de la numeración es totalmente configurable, como explico más abajo.

Para aplicar este truco seguiremos los siguientes pasos:

1. Ir a Escritorio Blogger.
2. En el menú seleccionamos Plantilla.
3. Hacemos clic en Editar HTML.
4. En el código buscamos lo siguiente:



]] ></b:skin>



5. Encima de ello tenemos que pegar el siguiente código

 .comment-thread ol {
counter-reset: contarcomentarios;
}

/* Comentarios */ 
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
z-index: 2;
position:relative;
font-size: 18px;
color: #2b2e31;
background:#f5f5f5;
border:3px solid #2b2e31;
padding:6px;
margin-top:10px; 
margin-right:15px;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

/* Respuestas */ 
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #2b2e31;
background:#f5f5f5;
border:3px solid #2b2e31;
padding:6px;
margin-top:0px; 
margin-right:0px;
}

Modificaciones en el Código

En el código anterior podemos modificar los colores y tamaño de fuente, entre otras cosas.

Color de fondo: Para ello tendremos que modificar las etiquetas background y poner un color en forma hexadecimal (Ejemplo: #000000;).

Color de fuente: Para modificarlo configuramos la etiqueta color.

Color de borde: Para ello modificamos en la etiqueta border, el código hexadecimal.

Tamaño de fuente: Modificamos la etiqueta font-size.