Come numerare automaticamente i commenti di Blogger

In un precedente post abbiamo inserito gli avatar di MyBlogLog nel nuovo modulo dei commenti di Blogger, oggi vedremo un hack per inserire in ogni commento il rispettivo numero.
Il numero associato al commento ci permetterà di identificare ogni commento all'interno di un post e non solo, infatti al numero assegneremo anche il permalink del commento.

Installazione

Le modifiche da fare al proprio template, per numerare automaticamente i commenti, sono le seguenti:

1. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".
2. Attivare la checkbox "Espandi i modelli widget" e aggiungere prima di "]]></b:skin>" il seguente codice:
   

   .numberingcomments {
   float: right;
   display: block;
   width: 50px;
   margin-right: 5px;
   margin-top: -35px;
   text-align: right;
   font-family: 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
   font-size: 30px;
   font-weight: normal;
   }
   
   .numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
   .numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

3. Scorrere la pagina fino a trovare "<dl id='comments-block'>" e aggiungere le modifiche evidenziate in rosso nel seguente codice:
   

   <dl id='comments-block'>
   
   <script type='text/javascript'>var CommentsCounter=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='numberingcomments'>
       <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
        <script type='text/javascript'>
         CommentsCounter=CommentsCounter+1;
         document.write(CommentsCounter);
        </script>
       </a>
      </span>
     </dt>
     
     <dd class='comment-body'>
     
      ...
     
     </dd>
    </div>
   
   </b:loop>
   </dl>

4. Salvare le modifiche con "Salva le modifiche".

Attualmente ho adottato questa soluzione per questo blog, quindi potete provare il funzionamento anche lasciando un commento a questo post ;-)

N.B. Il passo due della procedura è il codice CSS che definisce lo stile dei numeri.

[via Randomness]