Pubblicato il 05/11/15e aggiornato il

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


modulo-commenti

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://lh5.googleusercontent.com/-kona3gEaULY/UiEyfzPk5hI/AAAAAAAAjTQ/o6VAUzFpJPE/s10/red-check-10x10.png) 0px 6px no-repeat;
}

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

messaggio-modulo-commenti

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

commenti-nidificati-messaggio

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

image

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

tag-aggiunti-modello

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

messaggio-sopra-modulo-commenti

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://lh5.googleusercontent.com/-kona3gEaULY/UiEyfzPk5hI/AAAAAAAAjTQ/o6VAUzFpJPE/s10/red-check-10x10.png) 0px 6px no-repeat;
}

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

messaggio-sopra-modulo-commenti[4]

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


messaggio-commenti-nidificati-blogger

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




Nessun commento :

Posta un commento

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.