Come numerare i commenti e le risposte su Blogger

L'ordine dei commenti di Blogger è sempre dal più vecchio al più recente, questo vuol dire che i commenti più recenti si troveranno sempre in fondo, vicino al modulo per i commenti, quelli più vecchi, sempre in alto. Probabilmente sarebbe stato più utile il caso inverso dato che poi, una volta superato il limite, vanno a finire in una seconda pagina.

Se nel vostro blog i commentatori non mancano e certi post finiscono per avere decine o centinaia di commenti dovere per forza numerare i commenti e le risposte dei post in modo che diventi più semplice trovare l'ordine di un discorso creatosi all'interno dell'articolo stesso.


Eccovi l'anteprima del risultato:

Come potete notare i commenti principali vengono affiancati da un numero sempre crescente mentre le risposte del commento vengono affiancate da una lettera dell'alfabeto.


Se volete ottenere questo risultato per mostrare il numero del commento dovrete andare su Modello > Modifica HTML e cercare il tag ]]></ b: skin> , e prima di esso dovete inserire questo codice:

.comment-thread ol {
counter-reset: contatore-discussioni;
}
.comment-thread li:before {
content: counter(contatore-discussioni,decimal);
counter-increment: contatore-discussioni;
font-size: 26px; /* Dimensioni del numero*/
color: #1B93C1 !important; /* Colore del numero */
font-family: Century Gothic,Lucida Grande,Arial,Helvetica,Sans-Serif,Trebuchet MS; /* Tipo di Font */
font-weight: bold; /* Grassetto */
font-style: italic; /* Corsivo */
text-align: center;
float:right;
margin-right:45px;
margin-left:15px;
margin-top:-6px;
}
.comment-thread ol ol {
counter-reset: numero-risposte;
}
.comment-thread li li:before {
content: counter(contatore-discussioni,decimal) "." counter(numero-risposte,lower-latin);
counter-increment: numero-risposte;
font-size: 24px; /* Dimensioni della lettera */
color: #1B93C1 !important; /* Colore della lettera */
font-family: Century Gothic,Lucida Grande,Arial,Helvetica,Sans-Serif,Trebuchet MS; /* Tipo di Font */
font-weight: bold; /* Grassetto */
font-style: italic; /* Corsivo */
text-align: center;
float:right;
margin-right:45px;
margin-left:15px;
margin-top:-6px;
}

Il codice css è ampiamente personalizzabile e a fianco sono riportate le spiegazioni (es. Dimensione della lettera, Grassetto, Corsivo...), in questo modo potete cambiare il colore del font usato, lo sfondo, la posizione ecc. secondo le proprie esigenze.