Numerar comentarios anidados en Blogger

Si antes de aplicar los comentarios anidados en tu blog poseías numeración en los comentarios,  puedes usar la siguiente alternativa para mantener tus comentarios con el número y sin necesidad de recurrir a algún script.

La solución la encontré en W3.org, en donde dan a conocer un sistema enumerador que al trabajar bajo CSS 2.1 tiene compatibilidad con todos los navegadores web, incluyendo Internet Explorer.

Podemos aprovechar esta útil función para enumerar los comentarios ya que esta versión no la posee.

Vista Previa de la enumeración:

El tutorial:

Para lograr enumerar los comentarios, recurriremos a 2 atributos cruciales: content y counter.

El atributo "content", permite generar contenido directamente con CSS, mientras que el atributo "counter", permite crear enumeraciones de distintas formas. Usaremos "content" para así incrustar el contador.

Para poder enumerar mediante "counter", primero hay que establecerle el atributo "counter-reset" al elemento padre (El que almacena todos los elementos que queramos enumerar). En nuestro caso, el elemento padre está denominado por la clase ".comments":

.comments {
counter-reset: numeros;
}

El valor numeros es un nombre que asignaremos para que se cumplan las instrucciones que posteriormente aplicaremos.

Ahora bien, que ya tenemos el elemento padre con el atributo, procedemos a crear las reglas CSS para la enumeración mediante el pseudo-selector ":after", el cual irá aplicado a los blockquotes (Cada comentario está establecido por la etiqueta </blockquote>):

.comments blockquote:after {
content: counter(numeros, decimal);
counter-increment: numeros;
}

Si bien este código ya mostrará la numeración, posiblemente la visualice mal ya que no contiene flotación ni ningún atributo extra. Puedes optar por el siguiente código el cual incluye algunas reglas para que se visualice correctamente la numeración y así no tengas que tomarte la molestia de crear tus reglas:

.comments {
counter-reset: numeros;
}

.comments blockquote:after {
content: counter(numeros, decimal);
counter-increment: numeros;
font-size: 20px; /*Tamaño del número*/
color:orange; /*Color del número*/
float:right;
margin:0;
margin-left:15px;
margin-top:14px;
}

 Recuerda que al ser un código CSS deberá ir antes de:

]]></b:skin>