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

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

 

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.