Pubblicato il 14/01/12e aggiornato il

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.





8 commenti :

  1. ma....forse dovremo farci su l'abitudine....forse è + comodo per chi rispondeva ad uno ad uno ai commenti io di solito preferivo rispondere al diretto interessato nel suo blog e non nel mio....ad ogni modo vedremo. Pero' anche a chi abilita la risposta in mail, non mi pare venga avvisato della risposta data nel commento in blog quindi deve sempre andare a controllare!

    Intanto spero che al + presto sistemino l'orario!

    RispondiElimina
  2. qual' è il tag per modificare il textarea dove si inserisce il testo per inviarlo, nel mio blog è troppo largo vorrei ridimensionarlo alle dimensioni di quello delle risposte. grazie

    RispondiElimina
    Risposte
    1. @Carla+-+-
      Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2012/01/come-modificare-e-personalizzare-il.html
      Non erano ancora stati introdotti i commenti personalizzati ma ti può essere di aiuto

      Elimina
    2. tramite .comment-form non funziona, tramite direttamente su iframe diminuisce anche il box di "rispondi". Conosci altre soluzioni per modificare solo il box "Aggiungi commento"

      Elimina
    3. @Carla+-+-+
      Non ti so dire nulla di più perché il problema della larghezza del modulo lo affrontai quando ancora non c'erano i commenti nidificati. Adesso la larghezza del modulo cambia a seconda delle situazioni.

      Elimina
  3. Come cambiare questa parola ,,commenti" che lo trovo quando vieni indicato numero di commenti ,,2 commenti:"" lo voglio cambiare con parola annunci o altra parola pero problema e come si può cambiare non riesco trovare nessun modo di cambiare.Puoi aiutarmi? Grazie di esistere, Ernesto.

    RispondiElimina
    Risposte
    1. @ colorbis
      Leggi questo post
      http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
      è cosa che si può fare andando su Layout > Post sul blog > Modifica

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.