Come mostrare un messaggio prima del modulo dei commenti nidificati di Blogger.

Come mostrare un messaggio personalizzato con colori e icona prima del modulo dei commenti di Blogger anche nelle conversazioni nidificate.

In un commento mi è stato chiesto come si possa mostrare un messaggio ai lettori prima del modulo dei commenti. Questa funzionalità è presente su Blogger da molto tempo ma con l'introduzione dei commenti nidificati, il messaggio viene visualizzato prima del modulo solo nel primo commento mentre i successivi lo vedranno in fondo a tutte le conversazioni.

Andiamo per gradi e iniziamo a configurare l'aspetto del messaggio. Si va su Impostazioni > Post e Commenti > Messaggio del modulo dei commenti e si digita un testo piano che supporta anche alcuni tag HTML come <b> per il grassetto e <i> per il corsivo

Il messaggio potrebbe essere simile a questo

<b>Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a <i>Inviami notifiche</i> per essere avvertito via email di nuovi commenti al post.</b>

quindi si va in alto su Salva impostazioni. È supportato anche il tag <a href="URL_LINK">testo di ancoraggio</a> per inserire un collegamento. Si può anche renderlo esteticamente in linea con il resto del layout impostandone il colore e inserendo una icona iniziale. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla

.comment-form p {
color:#138679;
padding-left:12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRqqwxjKuQyi-lWRpoYAl-vKuUcvFh2xHbkfPQ77gS0injqlGNtE6zSsbcb5D-jc03KlzscrAqtefo3X04XvMtDcBlvkXmjMSD-myN_PGXgcYjzbN_CKhsVZs92eu4kiirkX_k00G6us/s10/red-check-10x10.png) 0px 6px no-repeat;
}

quindi si salva il modello. Il messaggio avrà quindi questo aspetto

Quando però ci sono altri commenti si pone il problema che il messaggio viene visualizzato alla fine di tutte le conversazioni presenti nei commenti nidificati

Su Modello > Modifica HTML si cerca allora la riga seguente con CTRL+F

<b:includable id='threaded-comment-form' var='post'>

Si clicca sulla freccetta nera sulla sinistra per visualizzare tutto il codice quindi si scorre verso il basso fino a trovare i tag <b:else/> e </b:if> in questo modo

Utilizzando questi due tag come riferimento si operano le seguenti modifiche

1. Subito dopo  <b:else/> va incollata la riga <div id='threaded-comment-form'>
   
2. Subito prima di </b:if> va incollato il tag </div>

in questo modo



Usando Ctr+F ora si cerca nel modello questa riga

document.getElementById(domId).insertBefore(replybox, null);

che dobbiamo sostituire con quest'altra

document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);

Si salva il modello. Ora il testo del messaggio si visualizzerà sopra al modulo

anche nei commenti nidificati. In tali commenti però il messaggio non avrà i colori che abbiamo impostato con il CSS che andava bene solo per il primo commento. Si cerca quindi nuovamente la riga ]]></b:skin>  e, subito sopra, si incolla quest'altro CSS che modifica l'aspetto del messaggio

#threaded-comment-form p {
color:#138679; padding-left:12px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRqqwxjKuQyi-lWRpoYAl-vKuUcvFh2xHbkfPQ77gS0injqlGNtE6zSsbcb5D-jc03KlzscrAqtefo3X04XvMtDcBlvkXmjMSD-myN_PGXgcYjzbN_CKhsVZs92eu4kiirkX_k00G6us/s10/red-check-10x10.png) 0px 6px no-repeat;
}

Dopo aver salvato un altra volta il template il messaggio avrà questo aspetto



Naturalmente i codici dei colori e l'URL della icona possono essere personalizzati a piacere.

Questa personalizzazione verrà automaticamente recepita anche nella versione mobile di Blogger qualora si sia optato per il modello Personalizza per il cellulare.