Come inserire il numero del contatore dei commenti nelle discussioni nidificate di Blogger.

Una delle ragioni per cui molte persone non hanno ancora scelto di passare alla nuova impostazione dei commenti di Blogger è quella che si vengono a perdere diverse personalizzazioni interessanti quali le emoticon di Facebook o il contatore dei commenti. Vista la gran mole dei CSS a disposizione degli utenti ritengo che sarà comunque trovata una soluzione per reinserire la maggior parte di queste personalizzazioni.

Cominciamo con quella del numero accanto a ciascun commento che ha avuto un grande successo tra i lettori di questo blog. La soluzione ci è data direttamente dalle direttive del W3C per i contatori e tale procedura dovrebbe portare a visualizzare il numero del commento con tutti i browser più recenti. Come ho già detto nei precedenti articoli che ho dedicato a questo argomento, lo stile del singolo commento è determinato da quello della citazione o blockquote. Creeremo quindi una classe padre per i commenti

.comments {
counter-reset: contatore-commenti;
}

che ho chiamato contatore-commenti. Per creare la regola di numerazioni dei commenti sarà necessaria un'altra classe con lo pseudo selettore :after che sarà applicato ai blockquote dei commenti che potremo personalizzare a piacere

.comments blockquote:after {
content: counter(contatore-commenti, decimal);
counter-increment: contatore-commenti;
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;
}

Accanto a ciascun valore è presente il commento in verde che ne indica il significato. I numeri dei tre margini in basso servono per posizionare al meglio il commento nel layout e possono essere calibrati in funzione del nostro modello. Entrambi questi codici devono essere incollati nel modello. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Quindi si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget. I due codici possono essere incollati subito sopra la riga ]]></b:skin>. Se i numeri dei commenti non si vedessero correttamente si cercherà allora

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}

e si sostituirà con quest'altro codice

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  counter-reset: contatore-commenti;
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments blockquote:after {
content: counter(contatore-commenti, decimal);
counter-increment: contatore-commenti;
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;
}

Dopo aver salvato il modello si vedrà il numero dei commenti accanto a ciascuno di essi

Una problematica non indifferente che si pone con questo procedimento è che, se si inserisce una risposta in un commento che non sia l'ultimo postato, varierà la numerazione dei commenti. Credo che in futuro dovremo cercare di numerare le discussioni invece dei singoli commenti.