Numerare i commenti su Blogger!

A grande richiesta, ecco la modifica che permetterà di visualizzare un numero progressivo a fianco ad ogni commento, come avevo nel template precedente, e che inserirò anche nel nuovo. Ogni numero sarà visibile in alto a destra e conterrà il link al commento. E’ un miglioramento grafico che fa il suo effetto e si rende utile quando il numero dei commenti in un post è così elevato che aiuta far riferimento al suo numero piuttosto che al semplice nick del suo autore.

La modifica è abbastanza semplice e si fa in cinque minuti. Come riferimento uso il codice pubblicato su Quite Random, con qualche piccola variazione, mentre come template di base userò il Minima, anche se non dovrebbero esserci grossi problemi a portare il tutto su un altro template.

Innanzitutto consiglio come sempre di fare il backup del template di Blogger: se qualcosa va storto, potrete sempre tornare indietro. Per chiarezza del codice, consiglio sempre di usare Notepad++ per modificare il codice, e riportarlo solo dopo su Blogger.

Inseriamo il codice HTML

Andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget”  e cercate questa riga di codice: 

<dl id='comments-block'>

Questa riga è l’inizio di un blocco di codice HTML che si occupa di visualizzare i commenti sotto il post. Incollo la parte iniziale della porzione di codice, con in rosso le parti da aggiungere: 

<dl id='comments-block'> 
    
      <script type='text/javascript'>var CommentsCounter=0;</script>     
        <b:loop values='data:post.comments' var='comment'>     
          <dt style='clear: both;' class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>     
            <a expr:name='&quot;comment-&quot; + 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>   
   <span class='numberingcomments' style='float: right; font-size: 20px;'>   
            <a expr:href='data:comment.url' title='Comment Link'>   
          <script type='text/javascript'>   
              CommentsCounter=CommentsCounter+1;   
              document.write(CommentsCounter)   
          </script>   
       </a>   
   </span>   
            <span class='comment-timestamp'>

Il numero colorato in verde stabilisce la dimensione del carattere, potrete aumentarlo o diminuirlo.

Inseriamo lo stile CSS

Cercate la seguente riga: 

]]></b:skin>

E subito sopra incollate:

  
.numberingcomments{     
float: right;    
display: block;     
width: 50px;     
margin-right: 5px;     
margin-top: -25px; /*comments-counter position*/     
text-align: right;     
font-family: ‘Century Gothic’,'Lucida Grande’,Arial,Helvetica,Sans-Serif;     
font-size: 30px;     
font-weight: normal;     
} 
    
/*since the numbers are actually links, we need to force the color properties*/     
.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;}

Potete alzare o scendere il numero che apparirà nel commento aumentando o diminuendo la posizione in verde (un valore negativo alzerà il numero, un valore positivo lo abbasserà).

A questo punto non vi resta che salvare il template e il gioco è fatto! Ecco un esempio di quello che vedrete:

Questa modifica non appesantisce in alcun modo il caricamento del blog, quindi andate sicuri. Per qualsiasi problema, lasciatemi un commento e vedremo di risolverlo assieme.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!