Pubblicato il 12/01/12e aggiornato il

Come attivare le risposte nidificate ai commenti nei modelli vecchi o personalizzati di Blogger.

In Blogger solo da qualche ora è presente la nuova funzione per rispondere ai commenti che permette di scegliere se postare un normale commento o se rispondere a un altro precedentemente pubblicato. Per questa seconda opzione è presente il link Rispondi che, solo per l'autore del blog o del commento, sarà affiancato all'altro link Elimina.

Come detto nel precedente articolo questa nuova funzione introduce delle modifiche sostanziali al codice di tutti i blog su Blogger. Per questa ragione molte personalizzazioni quali le emoticon di Facebook e la numerazione dei commenti o hanno già smesso di funzionare o lo faranno nel momento in cui introdurremo anche nei vecchi modelli la nidificazione dei commenti. Questo non vuol dire che in futuro non si possa trovare dei meccanismi per reintrodurle di nuovo nel modello del nostro blog.

Vediamo come procedere per attivare questa opzione nei modelli in cui non è ancora visibile. Innanzitutto bisogna selezionare Incorporato in Impostazioni > Post e Commenti per quello che riguarda la posizione del modulo dei commenti. Bisogna anche andare su Impostazioni > Di base e scegliere di offrire il Feed Completo per i commenti. Per quello che riguarda gli articoli ho notato che la nidificazione funziona anche con i Feed Fino all'Intervallo.

Dopo aver salvato il template andando su Modello > Backup/Ripristino > Salva modello completo si ritorna su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Bisogna cercare queste linee di codice

<b:include data='post' name='comments'/>

pigiando su F3 o su Ctrl+F. Nel mio modello ne ho trovate quattro. Tutte queste righe vanno sostituite con quest'altra riga di codice

<b:include data='post' name='threaded_comments'/> 

Di queste righe ce ne erano già due e quindi in totale diventeranno sei. Può darsi che in altri modelli tale numero risulti diverso. Si salva il modello e si apre un articolo in cui erano presenti i commenti per verificare che siano effettivamente presenti i link per la loro nidificazione

risposte-commenti

Cliccando su Risposte si potranno visualizzare o nascondere le risposte a ogni singolo commento. Inoltre il modulo per digitare i commenti si visualizzerà immediatamente sotto al commento a cui si è deciso di rispondere

modulo-commenti 

Lo stile di tutti i commenti, compreso quello dell'autore del blog, sarà quello della citazione altrimenti detta blockquote. Si può sempre modificare tale CSS andando sul Designer Modelli vale a dire su Modello > Personalizza > Avanzato e modificandone i parametri. Se non fossero presenti si può andare in Modello > Modifica HTML > Procedi per personalizzare il CSS del Blockquote.

Nella ulteriore ipotesi che nel vostro template non esista un foglio di stile per la citazione si può sempre crearlo da soli. A proposito dei Fogli di Stile, insieme a questi link Rispondi e Elimina sono stati inseriti in tutti i modelli di Blogger dei fogli di stile specifici per questa funzionalità.

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>

in cui come potete verificare ci sono un sacco di valori che si possono modificare a seconda delle nostre esigenze. Quegli URL lunghissimi rappresentano la freccia in posizione normale, per mostrare tutte le risposte, e in posizione collassata per nasconderle. Per analizzare ciascuna classe sarebbe opportuno usare Firebug ma il momento credo che basti così. Certamente riprenderemo questo discorso in un futuro neppure tanto lontano. 





86 commenti :

  1. Grazie ernesto, ma alla numerazione commenti non rinuncio

    RispondiElimina
    Risposte
    1. Vedremo quello che si potrà fare ;)

      Elimina
    2. conoscendoti, troverai la giusta soluzione

      Elimina
  2. Io l'ho scoperta e attivata poche ore fa. L'unico problema è che mi da un'orario sbagliato e non riesco a cambiarlo in nessun modo.

    RispondiElimina
    Risposte
    1. Per il momento c'è ancora il fuso orario di Mountain View. Credo che sarà presto risolto

      Elimina
    2. Ok, quindi è normale. Grazie. :-)

      Elimina
  3. Anch'io ho il fuso orario di Mountain View, ma, soprattutto, i links non sono funzionanti. Hai suggerimenti?

    RispondiElimina
    Risposte
    1. Per il momento tutto quello che hoi scoperto l'ho pubblicato in questo post. In seguito vedremo un po' ...

      Elimina
    2. Grazie, ripasso senz'altro. ;)

      Elimina
  4. Mi interessa parecchio ma mi piacerebbe mantenere i miei commenti (da padrona dl blog) evidenziati. Quali delle caratteristiche del foglio di stile va ritoccata per farlo?

    RispondiElimina
    Risposte
    1. Ci sto studiando, datemi un po' di tempo ;)

      Elimina
    2. Ok, attendo istruzioni ^^

      Elimina
  5. Sono riuscita, tramite questa procedura, ad attivarla, però accanto al mio nome nei commenti come mai non compare un simbolino nero a indicare che sono l'autrice del blog come agli altri a cui si è attivata da sola questa procedura?

    RispondiElimina
    Risposte
    1. Come vedi non c'è neppure accanto al mio nome. Quando scoprirò la ragione te lo farò sapere anche a te ;D

      Elimina
    2. Ernesto, tu adesso ce l'hai!

      Elimina
  6. anche a me succede...caro ernesto, è come se io avessi il modulo dove si scrivono i commenti bloccato con la scritta "aggiungi commento" sempre attiva...se riesci a fare un salto sul mio blog (http://spr2011.blogspot.com) te ne sarei grato, anche solo per aiutarmi a farmi un'idea su cosa possa essere successo....grazie1000

    ps ho semplicemente applicato la procedura presente in questo post...

    RispondiElimina
    Risposte
    1. Per adesso mi è difficile farmi una idea delle cose da fare. L'importante è salvare il modello prima di fare qualsiasi modifica e di lasciare sempre il file in una cartella per un backup anche dopo settimane

      Elimina
    2. ok..grazie...al momento ho risolto togliendo la libreria "Prototype & Script.aculo.us"... :D

      Elimina
  7. Io ho provato ad ingrandire il font del comment.. senza nessun risultato.. sigh

    RispondiElimina
    Risposte
    1. I commenti hanno lo stile del blockquote come ho ricordato anche nel post quindi devi andare nel Modello e cercare questo codice
      blockquote {
      quindi sotto inserire quest'altra riga
      font-size: 115%;
      dove la percentuale la puoi variare. Se nel tuo modello non è presente il codice del blockquote lo puoi inserire cercando la riga
      ]]>
      e incollando subito sopra questo codice

      blockquote { font-size: 115%; }
      Per la cronaca io in questo blog ho questo codice per il blockquote
      blockquote {
      margin: 25px 35px 15px 25px;
      padding: 10px;
      line-height: 1.6em;
      font-size: 115%;
      color: $blockQuoteColor;
      background: $blockquotebgColor;
      border: 1px solid $blockquoteBorderColor;
      }

      Elimina
    2. Errata corrige
      Non ha preso il codice della riga da cercare. O meglio ha pubblicato solo la prima parte. Mi ero dimenticato che è HTML. La riga da cercare per aggiungere il codice subito sopra è
      ]]></b:skin>

      Elimina
    3. Grazie Parsi, ho fatto come dici.. ma anche mettendo 300%.. non cambia minimamente la dim. del carattere dei commenti.. uffina...

      Elimina
    4. @Claudia
      Ho visto dal tuo sorgente pagina
      view-source:http://myricettarium.blogspot.com/
      che non hai il codice del blockquote. Prova a installarlo da sola. Qui sotto c'è un tutorial
      http://www.ideepercomputeredinternet.com/2009/08/come-creare-in-blogger-una-classe-di.html
      In ogni caso poi una soluzione la troviamo :)

      Elimina
    5. Ho letto il tutorial.. ma qual'è il codice che devo inserire nel caso dei commenti sempre questo: .post-body blockquote?Grazie

      Elimina
    6. Se hai inserito quello non mi stupisco che non ti funzioni :)
      Se non riesci a comprendere il post che ti ho linkato nel precedente commento prova con questi tre codici alternativi
      .blockquote { font-size: 115%; }
      oppure
      blockquote { font-size: 115%; }
      oppure
      #blockquote { font-size: 115%; }
      sempre prima di
      ]]></b:skin>

      Elimina
    7. Ho provato.. niente non cambiano.. restano sempre piccoli i caratteri. Ho provato anche a modificare questa classi di stile: .comments .comments-content {
      font-size: 13px;
      margin-bottom: 16px;
      }
      ma niente aumentando o anche diminuendo non cambia nulla...

      Elimina
  8. Ho provato a seguire la guida ma nel mio blog http://marcosbox.blogspot.com/ non funziona. O meglio appare il rispondi ma non funziona se ci clicco su

    RispondiElimina
    Risposte
    1. Esatto, anche a me capita. :(
      E inoltre il riquadro per postare si è rimpicciolito.

      Aspettiamo il grande Parsi. :)

      Ciao.

      Elimina
    2. Per il riquadro vedrò nei prossimi giorni, per ingrandire i caratteri fai riferimento alla risposta data a Claudia

      Elimina
    3. Parsi, attendo i tuoi preziosi aggiornamenti. Per il momento non posso sfruttare la news...
      Anche eseguendo i tuoi suggerimenti, nella versione HOME il link rispondi non funziona. Mentre, come ti dicevo, nella versione mobile funziona tutto perfettamente. Quindi per il momento è tutto congelato. :)

      Elimina
  9. Ho seguito la tua guida ma mi è scomparso il riquadro colorato dei commenti che avevo modificato seguendo un tuo precedente post, come mai? Tra l'altro anche il testo si è rimpicciolito.

    RispondiElimina
    Risposte
    1. Il testo si è rimpicciolito a tutti.. e le personalizzazioni precedenti come lo sfondo colorato per l'autore blog son scomparse per tutti... restano solo se metti il modulo commenti come pop up e non incorporato nel post. Io attendo che Parsi ci spieghi come ingrandire il carattere.. :-D

      Elimina
  10. se qualcuno ha problemi, io li ho risolti togliendo la libreria "Prototype & Script.aculo.us" dal modello...
    (l'avevo inserita seguendo le istruzioni di questo post http://www.ideepercomputeredinternet.com/2011/02/come-espandere-o-nascondere-testo.html)

    RispondiElimina
    Risposte
    1. Nel mio caso non è presente, forse è qualche altro script che fa danno

      Elimina
    2. esatto...magari vai ad esclusione...buona serata

      Elimina
  11. Grazie ad un commento qui ho notato anche io che l orario dei commenti è errato...speriamo modifichino o se tu Ernesto ci dirai come fare, farò....così come i numerini ai commenti io ci tengo a rimetterli, aspetto nuove buone: grazie come sempre sei una guida preziosa! :-)

    RispondiElimina
    Risposte
    1. @Fioredicollina
      Vedremo quello che si potrà fare perché è cambiato tutto il codice

      Elimina
    2. Certo. Prenditi tutto il tempo necessario ma sappi che qui ce n'è parecchia di gente che deve sistemare questo o quello. Quindi... Siamo nelle tue mani. Sei avvisato. :P

      Elimina
  12. Ho fatto tutte le modifiche ma i nuovi link non funzionano... :(

    RispondiElimina
    Risposte
    1. Leggimi nei prossimi giorni, domani mattina ho molto da fare e forse anche domani sera ma a partire da domani l'altro guarderò se trovo delle alternative.

      Elimina
    2. Grazie! Rimango sintonizzata! :P

      Elimina
  13. Ciao, io avevo provato a fare come dici qui siccome il tasto rispondi non mi usciva, ma poi ho notato che con internet explorer non mi apriva più la pagina dei post (apriva una pagina bianca che si caricava all'infinito) mentre con chrome funzionava bene. Cosa potrebbe essere?

    RispondiElimina
    Risposte
    1. Devono risolvere la questione quelli del team di Blogger

      Elimina
    2. Anche a me non funziona con IE8 e inferiori

      Elimina
  14. però...diciamo che questo rende quasi inutile l'utilizzo del modulo di Disqus...

    RispondiElimina
  15. Grazie per la spiegazione ..., mi sono fermata alla prima operazione cioe' Incorporato in Impostazioni > Post e Commenti e mi compare la scritta rispondi sotto ogni commento.
    Perche' non coincidono piu' gli orari reali dei commenti?
    Buona serata
    Francesca

    RispondiElimina
  16. @Francesca
    Non hanno ancora localizzato la data e l'ora quindi nei modelli con i commenti nidificati si vede ora e data di Mountain View in stile anglosassone (vedi nome del mese, AM e PM)

    RispondiElimina
  17. ciao, potreste aiutarmi? nel mio blog l'opzione rispondi c'è, ma se ci clicco su non funziona.. ho provato ad integrare il modello sostituendo il codice indicato nel vostro post, ma niente.. avete qualche consiglio? grazie

    RispondiElimina
  18. @niki starnino
    L'unico consiglio è quello di aspettare che si siano stabilizzati i codici perché in Blogger li stanno cambiando di continuo.

    RispondiElimina
  19. ciao!!!! anch'io vorrei aggiungere le risposte nidificate ma non ho il codice come posso fare'??? grazie

    RispondiElimina
    Risposte
    1. @pane ...
      Prova con questo metodo
      http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. ho provato ma mi manca la riga di codice da sotituire

      Elimina
  20. ciao, ho provato a fare le modifiche che hai indicato tu, ma non funziona il pulsante rispondi, mentre quello elimina si, io ho un layout creato appositamente per me? cosa posso avere sbagliato?

    RispondiElimina
  21. @antonella
    Il tuo è un problema molto comune. Il consiglio sarebbe quello di attendere che il team di Blogger completi il lavoro di aggiornamento (vedi bug deel fuso orario della data) ma può darsi che nei prossimi giorni pubblichi un tutorial che forse potrebbe aiutare.

    RispondiElimina
  22. A me funziona il tasto rispondi seguendo il tuo tutorial (questo), gli unici problemi sono che sono scomparsi gli avatar degli utenti e che non compare il simboletto che indica che sono l'autrice del blog.

    RispondiElimina
  23. @bismama 2.0
    Per l'icona dell'autore del blog non ci sono problemi
    http://www.ideepercomputeredinternet.com/2012/01/come-visualizzare-licona-dellautore-nei.html
    Per gli avatar vedremo quello che si potrà fare

    RispondiElimina
  24. Che incubo..ho letto il post e ho seguito tutte le istruzioni come una brava bambina, ma niente, neppure a me funziona il tsto rispondi. l'incubo è che ho letto tutti i vostri commenti e...Dio mio! non ci capisco una mazza! sigh... brutta bestia l'ignoranza informatica... comunque ora mi iscrivo per email qui (questo lo so fare:) e attendo. Magari quando sarà il momento ti disturberò perché mi spieghi col pallottoliere cosa devo fare :) Ciao Ernesto, grazie.
    (spero stanotte di non sognare il Prototype & Script.aculo.us, mi sembra una cosa orribile!)

    RispondiElimina
  25. grazie, funziona perfettamente!!!

    RispondiElimina
  26. PERFETTO!!!
    Grazie 1000, era da molto che desideravo applicare qst'applicazione al mio blog!! ;)

    RispondiElimina
  27. ciao scusa ma dove devo inserire il codice?? cioè in che punto del mio html?? devo cancellarne alcune parti?? grazie

    RispondiElimina
    Risposte
    1. @ Anna
      Attivare i commenti nidificati in un vecchio template è spesso una impresa. Dopo aver sostituito la riga di codice con l'altra per quello che riguarda il blocco finale, devi vedere se è presente nel tuo template o se almeno c'è la prima riga. In questo caso cancelli tutto il codice fino a < /style > e lo sostituisci con questo. Ricordati di salvare il modello prima di procedere.

      Elimina
  28. ciao Ernesto ho messo i commenti nidificati solo che al fondo della pagina mi appaiono due riquadri e non uno per commentare , dove ho sbagliato?

    RispondiElimina
  29. fa niente era il template nuovo che da problemi , possibile che non ne funzioni uno di quelli che si trovano in giro? scusa ancora per il disturbo!

    RispondiElimina
  30. grazie mille!!!
    finalmente ho messo ordine tra i miei commenti ^__^

    RispondiElimina
  31. Grazie mille, sistemato anche nel mio blog!

    RispondiElimina
  32. Ciao Ernesto!
    Volevo chiederti se era possibile graficamente, dare due stili differenti al tasto rispondi ed elimina.

    Attualmente, utilizzando il codice da te fornito, i due pulsanti hanno le stesse caratteristiche, io invece vorrei avessero per esempio due colori differenti.

    Grazie :)

    RispondiElimina
    Risposte
    1. E a che servirebbe? Il pulsante Elimina lo vedi solo tu come amministratrice del blog e non viene visto dai lettori. Poi non so neppure se si possa fare perché i due pulsanti hanno lo stesso CSS
      @#

      Elimina
  33. ciao :)
    capito spesso sul tuo sito, mi salvi sempre la vita XD
    ho un problema, ovviamente.... noto che nel mio blog è sparita la possibilità di rispondere ai commenti e anche la nidificazione delle risposte (entrambe funzionanti ad inizio anno).
    ho provato a sostituire quella riga di codice (ne ho una sola nel mio blog) ma mi fa addirittura sparire i commenti!

    RispondiElimina
    Risposte
    1. Ho provato a postare un commento nel tuo sito ed è tutto OK. Deve essere il tuo browser. Cambialo oppure elimina la cache e i cookie
      @#

      Elimina
    2. ho visto :)
      a postare commenti si riesce perché ho ripristinato la riga di codice.
      io però non posso rispondere ai commenti lasciati. e vedo che, nei post dove ancora potevo rispondere, le risposte non sono più nidificate ma sono tutti singoli post separati.
      purtroppo anche cambiando browser, la storia non cambia :(

      Elimina
    3. Non ho idea da cosa possa dipendere. Forse è il caso di cambiare il template e di scegliere uno ufficiale di Blogger più moderno :)
      @#

      Elimina
    4. no, sarebbe un peccato perché questo mi piace.
      ho risolto, comunque, seguendo questo altro tuo post
      http://www.ideepercomputeredinternet.com/2012/01/blogger-introduce-le-risposte-e-la.html
      io avevo impostato i feed su "nessuno". ora l'ho attivato solo per i commenti ed è tornato tutto ok!
      piuttosto, ora esce una scritta "Nuovo codice commenti".... dovrò eliminare qualcosa dal codice

      Elimina
  34. ciao ernesto sapresti dirmi perché da un giorno all'altro, senza aver modificato nulla i commenti nidificati compaiono tutti disordinati. puoi controllare tu stesso nell'ultimo post pubblicato

    RispondiElimina
    Risposte
    1. Il tuo blog qual'è? Questo?
      http://www.madeinbottega.com/2015/04/lo-telaio-legno.html
      Magari la prossima volta incollami l'URL. Vedo che ti è andato fuori posto il modulo dei commenti. Dopo aver salvato il modello prova con questa modifica
      http://www.ideepercomputeredinternet.com/2012/06/blogger-messaggi-commenti-modulo.html
      però può darsi che non riesca a risolvere :(
      @#

      Elimina
    2. si è quello il blog, proverò con la modifica che mi hai suggerito, ma da cosa può dipendere?

      Elimina
  35. purtroppo niente da fare, ma secondo te se provassi a togliere i commenti nidificati e poi a rimentterli, potrei perdere lo storico?

    RispondiElimina

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.