SPRITES
Primero expandimos las plantillas de artilugios, ésta es la parte a modificar del código original de una plantilla Minima hasta ésta fecha:
MOSTRAR Código [+/-]
Agregando un pequeño script de JMiur al código los va a numerar sin problemas:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<!-- Ponemos el contador a cero -->
<script type='text/javascript'>var contadorComentarios=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- Agregamos un bloque para darle un nombre único a cada comentario -->
<div expr:id='data:comment.id'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<!-- El código del contador -->
<div class='comentacontador'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</div>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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/>
</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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<!-- Establecemos la clase del comentario y cerramos el bloque -->
<script type='text/javascript'>
ContarC('<data:comment.id/>')
</script>
</div>
</b:loop>
</dl>
Definimos unas cuantas propiedades CSS colocándolas antes de ]]></b:skin>, yo usé estas pero podrían ser otras:
/* Numerar los comentarios */
.comentacontador {
float: right;
font-family: times new roman;
font-size: 28px;
font-weight: normal;
color: #1B1E20;
text-shadow: 1px 1px 2px #000000;
}
Ahora el problema es que cuando se sobrepasan los 200 comentarios Blogger los divide en páginas y en cada una el contador se inicia desde cero.
Se me ocurrió agregarle unas condicionales para que los numere correctamente.
data:post.olderLinkUrl genera la url del texto ‹Más antiguo, por ejemplo si estamos en la página dos con el parámetro ?commentPage=2 creará un enlace a la página uno con el parámetro ?commentPage=1.
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=1"'>
Esto sólo funcionará en la página 2
</b:if>
Entonces para no complicarles la vida les dejo el código final que sería este:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<!-- Ponemos el contador al número que deba iniciar en cada página -->
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=1"'>
<script type='text/javascript'>var contadorComentarios=200;</script>
<b:else/>
<script type='text/javascript'>var contadorComentarios=0;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=2"'>
<script type='text/javascript'>var contadorComentarios=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=3"'>
<script type='text/javascript'>var contadorComentarios=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=4"'>
<script type='text/javascript'>var contadorComentarios=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=5"'>
<script type='text/javascript'>var contadorComentarios=1000;</script>
</b:if>
<b:loop values='data:post.comments' var='comment'>
<!-- Agregamos un bloque para darle un nombre único a cada comentario -->
<div expr:id='data:comment.id'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<!-- El código del contador -->
<div class='comentacontador'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</div>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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/>
</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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<!-- Establecemos la clase del comentario y cerramos el bloque -->
<script type='text/javascript'>
ContarC('<data:comment.id/>')
</script>
</div>
</b:loop>
</dl>
En caso de tener más de 1200 comentarios (o más de 6 páginas) en un post agregamos otra condicional según lo necesitemos:
<b:if cond='data:post.olderLinkUrl == data:post.url + "?commentPage=6"'>
<script type='text/javascript'>var contadorComentarios=1200;</script>
</b:if>
Y ahora sí, comentarios numerados en todas las páginas.
Ir al formulario 3 Comentarios:
Hola gracias, funciona perfecto
Gracias por tu blog.
Ya tengo numerados los block pero los numeros salen fuera de cuadro
Parece ser un problema en el CSS.
Publicar un comentario
De preferencia lea mi política de comentarios.
Puede comentar con su cuenta Google (Google +, Blogger, Youtube, etc.)
En caso de que usted no disponga de una cuenta seleccione Nombre/URL donde dice "Comentar como:" coloque su nombre o pseudónimo, y en URL la dirección de su página (como la de Facebook, Twitter u otra) y recuerde que la dirección web debe iniciar con http://
Al comentar puede utilizar algunos códigos HTML
Comentar en una nueva pestaña
En negrita <b>texto</b>
En itálica <i>texto</i>
Crear un enlace <a href="url-de-la-página">Texto</a>
Si el formulario anterior no funciona puede enviar su comentario utilizando los métodos antiguos:
En una pequeña ventana emergente