Numerar comentarios en Blogger.

Hace ya tiempo que este truco anda en danza, pero quizás por eso, se encuentra perdido en los archivos de varios blogs y no lo encontrais. Servidor lo aprendió hace bastante de Vagabundia, en su entrada Blogger y los comentarios (1), en el que además explicaba cómo hacer para que fueran saliendo de distinto color los comentarios pares e impares.

Para ponerle un numerito ordinal a cada uno de los comentarios de una entrada, vamos a necesitar una variable inicialmente a cero y un pequeño script que irá sumándole 1 a su valor cada vez que se "imprima" un comentario. Luego recuperaremos esa variable y pondremos ese número dónde nos convenga.

Todos los comentarios son creados mediante un loop (bucle) que va realizando repetitivamente la misma tarea: busca el primer comentario, muestra todos los datos relacionados con él (autor, avatar, texto, fecha...) y cuando termina, busca el siguiente comentario. Esto lo hará hasta terminar con todos los comentarios existentes.

Por tanto, en primer lugar, buscamos el bucle en cuestión (plantillas de artilugios expandidas) y que está redactado como <b:loop values='data:post.comments' var='comment'>. Justo antes de esa línea, insertamos:

<script type='text/javascript'>var contadorComentarios=0;</script>

Esto lo único que hace es crear una variable llamada contadorComentarios y asignarle el valor cero. Ahora buscamos este otro trozo e insertamos lo marcado en verde:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<!-- Numerar comentarios -->
<div class='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Enlace al comentario'><script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios);
</script></a></div>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Este otro código suma una unidad a la variable cada vez que se pasa por el bucle (cada vez que se muestra un nuevo comentario), lo muestra y, a la vez, incluye un enlace en dicho número al propio comentario, que es el mismo que habitualmente lleva la fecha al pie de cada uno. Este link sirve para poder enlazar a cualquier comentario publicado.

Ahora sólo nos queda darle estilo a nuestro numerito. La clase que hemos utilizado es comentacontador, así que ese será también el nombre que tendremos que usar en la parte CSS (antes de ]]></b:skin>). Como los números son a su vez enlaces, utilizaremos el ancla (a) y un efecto para cuando se pase el puntero por encima (hover). A continuación un simple ejemplo:

.comentacontador a {
float:right;
margin-top:-20px;
margin-right:20px;
font-size: 18px;
color: #999999 !important;
text-decoration:none;
padding:0px 4px;
}
.comentacontador a:hover {
color: #333333 !important;
}

Esta última parte la tendreis que ajustar en función de vuestro propio diseño.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter