Enumerar comentarios en Blogger

Enumerar comentarios en Blogger

Enumerar los comentarios puede ser muy útil para darle un poco de orden al blog. Con esto consigues que la lista de comentarios realizados en tu blog se vea un poco mas atractiva que sin enumeración.

Recuerda bien, que este tutorial es un poco mas complicado, ya que el HTML de las plantillas puede variar, por lo que deberás en algunos casos, buscar palabras claves entre códigos.

Puedes respaldar tu plantilla en el caso de algún problema de formato.

Vista previa del enumerado:
 


¿Cómo enumerar los comentarios en Blogger?

Primero, vamos a ''Diseño/Edición HTML'' en donde presionamos en ''Expandir plantillas de artilugios''. Buscaremos el siguiente código:
<b:loop values='data:post.comments' var='comment'>
 Sobre esa línea pegaremos el siguiente código:
<script type='text/javascript'>var contadorComentarios=0;</script>
 

Ahora buscaremos el código en Naranjo, de no aparecer la búsqueda, busca por similitudes en tu plantilla, pegarás debajo de éste el código en verde, de tal forma que quede así:


<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>

Ahora le daremos estilo al enumerador, buscaremos el siguiente código:
]]></b:skin>
Arriba de éste, pegarás el siguiente:

.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;
}

Presiona en Guardar Plantilla y listo.

Consideraciones:

Los valores en Naranjo equivalen a los colores, puedes buscar colores en su formato hexadecimal en estas tablas:
Recuerda que si tienes algún problema, puedes consultar mediante los comentarios. Si necesitas un tutorial guiado, puedes utilizar el chat, especificando cual es tu problema y lo solucionaré de inmediato.

.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger