Come numerare commenti e risposte su Blogger con il CSS.

Come inserire un sistema di conteggio dei commenti e delle risposte per i commenti nidificati di Blogger.

Con l'introduzione dei commenti nidificati su Blogger la numerazione delle interazioni da parte dei lettori si è fatta più complicata perché ci sono i commenti inseriti in modo solito e quelli pubblicati dopo che si è cliccato sul link Rispondi che si trova sotto ciascun commento. In effetti non c'è una vera e propria nidificazione perché si può creare solo un livello di conversazione. Vale a dire che rispondendo a una risposta il contributo risulterà inserito senza una ulteriore identazione (rientro).

Per creare un sistema di numerazione dobbiamo quindi crearne due. Il primo che conta i commenti normali e il secondo che conta invece le risposte a ogni singolo commento che però dovrà mantenere anche la prima numerazione. Si può introdurre questa personalizzazione anche senza modificare il modello che per alcuni utenti di Blogger è sempre comunque un problema.

Si va su Modello > Personalizza > Avanzato > Aggiungi CSS e si visualizzerà un modulo posto in alto a destra che potrà essere vuoto o che potrà contenere del codice aggiunto in precedenza. Si posiziona il cursore sotto la fine del codice (se esiste altrimenti all'inizio del modulo) e si incolla questo codice

/* Numerazione Commenti Inizio */
.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 del commento */ 
color: #911a28 !important; /* Colore del numero del commento */ 
font-family: Georgia; /* Tipo di Font */
font-weight: bold; /* Grassetto */ 
font-style: italic; /* Corsivo */ 
text-align: center;
/* Posizionamento numero commento */ 
float:right;
margin-right:30px;
margin-top:-10px;
}
.comment-thread ol ol {
counter-reset: numero-risposte;
}
.comment-thread li li:before {
content: counter(contatore-discussioni,decimal) "." counter(numero-risposte,decimal);
counter-increment: numero-risposte;
font-size: 24px; /* Dimensioni del numero della risposta */ 
color: #911a28 !important; /* Colore del numero della risposta */
font-family: Georgia; /* Tipo di Font */ 
font-weight: bold; /* Grassetto */ 
font-style: italic; /* Corsivo */ 
text-align: center;
/* Posizionamento del numero della risposta */ 
float:right;
margin-right:20px;
margin-top:-8px;
}
/* Numerazione Commenti Fine */

come mostrato in questo screenshot

Quindi si posiziona il cursore alla fine del codice e si pigia su Invio per saltare una riga. In questo modo si attiverà il bottone Applica al blog posto in alto a destra. Ci si clicca per salvare la modifica. Con questo codice la numerazione dei commenti normali sarà denotata con numeri naturali mentre la numerazione delle risposte sarà formata da una coppia di numeri naturali separati da un punto.

Si possono modificare i parametri che riguardano il codice del colore, la famiglia di caratteri e la loro dimensione. Il codice proposto mostra i numeri in grassetto e corsivo. Se non piacciono si possono cancellare le righe relative. La prima parte del codice configura l'aspetto del numero dei normali commenti mentre la seconda parte l'aspetto della numerazione delle risposte. 

Il posizionamento del numero (o dei numeri nel caso delle risposte) è sulla destra (float:right) e viene ottenuto attraverso i due parametri che ne determinano la distanza dalla parte alta e dalla parte destra. La numerazione segue i numeri decimali ma i più originali possono scegliere anche altre modalità. Basta modificare l'attributo decimal presente nella prima parte del codice per intervenire nella numerazione dei commenti e sempre decimal presente due volte nella seconda parte del codice per modificare l'aspetto della numerazione delle risposte. Ricordo le altre opzioni

1. decimal: sistema decimale 1, 2, 3, …
2. decimal-leading-zero: sistema decimale ma con due cifre 01, 02, 03, …
3. lower-roman: cifre romane in minuscolo i, ii, iii, iv, ...
4. upper-roman: cifre romane in maiuscolo I, II, III, IV, …
5. lower-latin: lettere latine minuscole a, b, c, d, …
6. upper-latin: lettere latine maiuscole A, B, C, D, …
7. lower-greek: lettere greche minuscole α,  β, γ, δ, ...

Se per esempio la riga seguente presente nella seconda parte del codice

counter(contatore-discussioni,decimal) "." counter(numero-risposte,decimal);

si modifica in questo modo

 counter(contatore-discussioni,upper-roman) "-" counter(numero-risposte,lower-greek);

il risultato visivo risulterà decisamente originale

dove è stato inserito anche un trattino al posto del punto di divisione. Se si hanno delle remore a utilizzare il Designer Modelli è meglio modificare il modello. Qualche volta infatti nei template modificati andare su Personalizza può portare a delle modifiche indesiderate. In questo caso il codice invece di inserirlo su Personalizza > Avanzato > Aggiungi CSS si incolla su Modello > Modifica HTML subito sopra alla riga che delimita i fogli di stile e che è ]]></b:skin>.