Numeración de comentarios

 Siguiendo estos pasos, vuestros comentarios se verán numerados como en El Escaparate.

Nos situamos en la pestaña "Edición HTML" de nuestro panel de Blogger, y marcamos la opción de expandir las plantillas de artilugios.



[1] Localizamos esta línea al comienzo del bloque de código perteneciente a los comentarios:

<dl id='comments-block'>

Una vez localizada esa línea como referencia, hacia abajo en la plantilla encontramos el resto del código tal como lo vemos aquí, donde hemos de añadir el código necesario y que está resaltado en color naranja:

<dl id='comments-block'>

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

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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/>

<span class='comentacontador'>
      <a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
         <script type='text/javascript'>
            contadorComentarios=contadorComentarios+1;
            document.write(contadorComentarios)
         </script>
      </a>
   </span>

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

</div>

</b:loop>
</dl>

 Nota:
Tendremos en cuenta que si hemos añadido el "truco" de cambiar el "dijo" que sigue al autor del comentario la etiqueta  <data:commentPostedByMsg/>  no aparecerá y en su lugar estará el texto que hayamos colocado en lugar del "dijo".


[2] Iremos ahora hacia arriba, a la parte del CSS de la plantilla y antes de ]]></b:skin> colocaremos este código:

.comentacontador {
float: right;
display: block;
width: 50px;
margin-top: -30px; /* la posición de los números */
text-align: right; /* el número a la derecha */
/* el tipo y tamaño de la fuente */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-weight: normal;
}

Idea original de: Vagabundia