Elenco delle classi di stile (CSS) dei commenti nidificati di Blogger e loro significato.

Continuo con la analisi dei cambiamenti apportati dall'introduzione dei Commenti Nidificati su Blogger. Certamente questa novità ha generato un po' di caos tra molti proprietari di blog su questa piattaforma ma bisogna riconoscere che questa nuova funzione porta degli indubbi benefici al blog e anche ai lettori:

1. Incoraggia la partecipazione e i commenti: vi sarà certamente capitato di leggere un commento interessante con cui non avete potuto interagire visto che sotto ne erano già stati inseriti molti altri. Prima era molto difficile da identificare e non potevamo fare altro che indicare l'autore del commento oppure il numero, in quei blog che avevano inserito questa personalizzazione. Adesso si potrà rispondere direttamente al commento specifico
2. Più che di commenti dovremo parlare di discussioni: il concetto di numero del commento viene sorpassato perché sotto a ciascuno di essi possono essere inserite delle risposte senza apparenti limitazioni. Si dovrà parlare quindi di numero di discussioni aperte in calce a un singolo post
3. Viene incentivata la volontà di commentare: questo metodo di nidificazione dei commenti incoraggia senza dubbio a commentare di più. Basta vedere per esempio quello che è accaduto in questo blog negli ultimi giorni. Più commenti significano innanzitutto più contenuti rilevati dai motori di ricerca e un rinfrescamento dei post più puntuale. Ne beneficerà ovviamente l'indicizzazione di tutto il blog con un possibile aumento delle visite.
4. Viene agevolata la discussione e il dialogo: ci potranno essere degli utenti che intavolano una discussione tra di loro nelle pagine del blog a tutto beneficio dell'aumento dei contenuti, dell'interesse dell'utente e quindi in definitiva anche a favore dello stesso sito.
5. Maggiore facilità nell'individuazione delle risposte: potendo rispondere direttamente a una domanda, sarà più facile per chi l'ha fatta individuare la eventuale risposta e questo faciliterà l'interazione tra lettori e autore del blog.

Gli sviluppatori di Blogger potevano inserire nella Bacheca l'opzione per decidere se adottare o meno il metodo dei commenti nidificati. In questo modo gli utenti avrebbero avuto la possibilità di scelta così come accade per il Lightbox nativo di Blogger. Non è detto che non lo facciano in futuro ma per adesso, nel momento in cui si seleziona la posizione Incorporato sotto il post per il modulo dei commenti, automaticamente si scelgono anche i commenti nidificati.

Questa volta però bisogna dire che i tecnici di Blogger sono stati molto generosi nel dare agli utenti tutti gli strumenti per personalizzare tutto il meccanismo delle discussioni sotto forma di fogli di stile che non sono stati inseriti nella sezione <b:skin> come al solito ma sotto alla riga

<b:includable id='threaded_comment_css'>

utilizzando un semplice tag <style> che si può trovare solo cliccando su Espandi modelli widget. Ricordo brevemente  che i fogli di stile sono determinati da un tag che può iniziare con un punto o con un cancelletto, per esempio .comments, e il loro contenuto è compreso tra due parentesi graffe. Per richiamare lo stile occorre usare l'attributo class oppure id all'interno di un <div> o altro tag che lo supporta, per esempio <div class="comments">. 

Se per esempio vogliamo inserire in una classe una diversa dimensione dei caratteri possiamo incollare una riga come questa font-size:14px; all'interno della stessa classe. Per modificare il colore del testo è sufficiente questa riga color:#191919; mentre per il colore di sfondo si può usare questo tag background-color:#FFFFFF;. Si possono anche modificare i caratteri del testo attraverso una riga simile a questa font-family: Courier New; dove il nome della famiglia dei font deve essere supportata da Blogger oltre che dal browser che viene utilizzato. Passo a stilare l'elenco di tutte le 23 classi disponibili per i commenti:

1. .comments { ... } - rappresenta tutto il box dei commenti
2. .comments .comments-content { ... }  - tutto il contenuto del commento
3. .comments .comment .comment-actions a { ... } e .comments .comment .comment-actions a:hover { ... } - sono le classi che determinano l'aspetto dei link Rispondi e Elimina in condizioni normali e quando vengono puntati con il mouse
4. .comments .comments-content .comment-thread ol { ... } - elenco principale dei commenti. Ciascun elemento <li> racchiude un singolo commento e tutte le risposte che ha ricevuto
5. .comments .comments-content .inline-thread { ... } - in combinazione con altre classi serve per inserire un padding per diminuire la larghezza
6. .comments .comments-content .comment-replies { ... } - il blocco di tutte le risposte a un commento compreso il bottone per mostrarle
7. .comments .comments-content .comment-thread { ... } - tutto il blocco interno delle risposte a un commento
8. .comments .comments-content .comment-thread:empty { ... } - per nascondere la discussione quando non ci sono risposte
9. .comments .comments-content .comment { … } - determina l'aspetto di ciascun commento. E' questa la classe più indicata per inserire colore del testo del commento, la dimensione dei caratteri e la famiglia dei font.
10. .comments .comments-content .comment:first-child { ... } e .comments .comments-content .comment:last-child { ... } - determinano il padding (distanza interna) e il border del primo e dell'ultimo commento
11. .comments .comments-content .comment-body { ... } - determina la posizione relativa (da non modificare)
12. .comments .comments-content .comment-header { ... } - blocco dell'autore con l'avatar e data
13. .comments .comments-content .user { ... } - nome e link dell'autore del commento o della risposta
14. .comments .comments-content .icon.blog-author { ... } - icona dell'autore del blog. Attualmente è una classe che ha al suo interno le dimensioni dell'icona 18x18 pixel, la sua posizione è inline con determinati margini 
15. .comments .comments-content .datetime { ... } - data e ora del commento o della risposta. E' presente al momento solo il margine sinistro
16. .comments .comments-content .comment-content { ... } - è il testo di ogni commento o risposta. Lo stile sarà quello del blockquote se è definito nel modello. Anche all'interno di questa classe possono essere inserite personalizzazioni riguardo colori o dimensioni, per esempio font-size:120%; per aumentare le dimensioni dei caratteri dei commenti
17. .comments .comments-content .owner-actions { ... } - letteralmente le azioni del proprietario del blog (non so dire altro)
18. .comments .comments-replybox { ... }, .comments .comment-replybox-single { ... } e .comments .comment-replybox-thread { ... } - sono i moduli per le risposte ai commenti e per le discussioni. Nel mio modello dà altezza 250 pixel e larghezza 100%. Si possono modificare.
19. .comments .continue { ... }, .comments .continue a { ... }, .comments .comments-content .loadmore { ... } e .comments .comments-content .loadmore.loaded { ... } - forse servono per creare la struttura di nidificazione dei commenti (da non modificare)
20. .comments .thread-toggle { ... } - link per nascondere o visualizzare le risposte a un commento
21. .comments .thread-expanded .thread-arrow { ... } e .comments .thread-collapsed .thread-arrow { ... } - icone a forma di freccia per mostrare o nascondere le risposte ai commenti
22. .comments .avatar-image-container { ... } - box del commentatore con dimensioni 36x36 pixel
23. .comments .avatar-image-container img { ... } - avatar del commentatore, anche in questo caso 36 pixel di larghezza.

Concludo ricordando che prima di ogni modifica è opportuno salvare il modello per un eventuale backup di sicurezza.