Pubblicato il 06/01/12e aggiornato il

Come modificare e personalizzare il modulo dei commenti di Blogger.

Nei blog su Blogger si possono scegliere delle diverse opzioni di configurazione per i commenti. Se si va su Impostazioni > Post e Commenti > Posizione commento possiamo scegliere tra Incorporato, Pagina intera, Finestra popup e Nascondi. Con Pagina intera e Finestra popup, quando un lettore vorrà commentare, verrà aperta rispettivamente una intera pagina o una finestra popup in cui visualizzare i commenti già postati oltre al modulo per inserire il proprio. Con l'opzione Nascondi si decide invece di non mostrare del tutto l'area dei commenti e di impedirne la pubblicazione e la visualizzazione.

In questo articolo mi occuperò di come si possa personalizzare il modulo dei commenti quando si è selezionata l'opzione Incorporato (sotto il post). Una aggiunta molto carina e in linea con blog che trattano di argomenti i più disparati è quella già presentata nell'articolo

Il concetto è quello di digitare delle combinazioni di caratteri per creare delle emoticon così come avviene nella chat di Facebook. Vediamo quali siano le altre possibili personalizzazioni di questa area del layout così importante. Mi riferirò a un template Etereo ma il codice dovrebbe essere identico o quasi anche per tutti gli altri template del Designer Modelli. Se si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget possiamo visualizzare tutto il codice del modulo dei commenti che sarà di questo tipo

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Vediamo quali sono le parti del codice che possono essere modificate. La classe principale è .comment-form che si vede applicata nella seconda riga su <div class='comment-form'>. Riguarda tutta la zona intorno al box dei commenti inclusi i titoli e i bottoni. E' possibile inserire in questa area un colore di background o una immagine di sfondo anche del tipo texture, cioè che si ripete in senso orizzontale e verticale. Si può anche impostare una diversa larghezza per il modulo dei commenti sostituendo per esempio width='100%' con width='600px' in entrambe le occorrenze. Di default la larghezza del modulo è di circa 400 pixel. Si può anche modificare l'altezza del box cambiando il valore di height='410', stavolta solo nella prima occorrenza. Un esempio di foglio di stile da incollare sopra alla riga ]]></b:skin> potrebbe essere questo

.comment-form {
text-align:center;
margin: 0 auto;
background: url(URL IMMAGINE DI SFONDO);
padding:10px;
}

che centra il modulo nel layout del blog e inserisce una immagine di sfondo ripetitiva. In questo caso viene fuori una cosa di questo genere. L'immagine di una stella è la prima che ho trovato e certo non è che sia il massimo … ma come esempio basta e avanza.

centrare-modulo-commenti

 

.comment-form h4 è la classe che riguarda l'aspetto del testo Posta un commento. Per esempio si può incollare questo CSS

.comment-form h4 {
font-size:130%;
color:#003366;
}

che ne modifica il colore e la dimensione in questo modo

posta-commento

Anche in questo caso il codice va inserito subito sopra la riga ]]></b:skin>. Possono essere inseriti anche altri parametri.  

.comment-form p è un altro possibile CSS che rappresenta un messaggio personalizzato che si può inserire nel modulo al di sotto del precedente.

#comment-editor è la classe del vero modulo del commento. Non è che si possa modificare molto o se si può fare non ci sono riuscito.  

Molte modifiche possono però essere fatte direttamente nell'HTML senza utilizzare i CSS. Il trucco consiste nell'inserire altre espressioni oltre o al posto di quelle che già sono presenti. Questo però ho testato essere più semplice da realizzare nei vecchi template rispetto a quelli del Designer Modelli.

Per esempio si può cercare la riga  <data:blogTeamBlogMessage/> e subito sotto incollare un codice come questo

<ul class='commenti-guida'>
<li><div align='justify'>Primo messaggio.</div></li>
<li><div align='justify'>Secondo messaggio.</div></li>
<li><div align='justify'>Terzo messaggio.</div></li>
<li><div align='justify'>Quarto messaggio</div></li>
</ul>
<style>
.commenti-guida li {margin-left:-10px; width:650px;}
.commenti-guida li {
font-size:85%;
font-style: italic;
color:#191919;
background:url(URL_ICONA_ELENCO) no-repeat center left;
padding-right:50px;
list-style:none;
padding-left: 25px;
</style>

dove si possono inserire dei messaggi per i lettori che saranno visualizzati in un elenco con questo aspetto

elenco-avvertenze-per-commentatori

All'interno dei messaggi si possono inserire anche dei link con l'HTML. E' possibile personalizzare lo stile attraverso la scelta della dimensione, del corsivo, del colore e della icona che precede ciascun messaggio. Si può anche aggiungere un messaggio nel modulo dei commenti andando su Impostazioni > Post e Commenti > Messaggio del modulo dei commenti > Aggiungi, digitando nell'apposito campo quello che si vuole visualizzare subito sotto a Posta un commento e salvando le impostazioni. E' anche possibile modificare la scritta Posta un commento. Si cerca il codice

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

in cui il messaggio Posta un commento è dato dal tag visualizzato in rosso. Tale codice può per esempio essere sostituito con

<h4 id='comment-post-message'>Siamo interessati alla tua opinione</h4>

dove la scritta in blu può essere ovviamente personalizzata. Si può anche inserire un CSS sopra alla riga ]]></b:skin> simile a questo

.comment-form h4 {font-size:150%; color:#003366;}

per personalizzare dimensioni e colore. Il risultato che si ottiene è questo

personalizzazione-modulo-commenti

Si possono inserire altri comandi come per esempio text-align:center; che consente di centrare la scritta che abbiamo inserito. Concludo ricordando che è buona norma salvare il modello completo andando su Back/Ripristino quando si procede a delle modifiche del template. Lo è in misura maggiore in questo caso visto che si opera in delle zone particolarmente sensibili e con risultati tutt'altro che scontati.





68 commenti :

  1. Interessantissimo come al solito, Ernesto.
    Ti faccio una domanda che ormai sai benissimo che è una mia fissa:
    Tutto quello che dici è attuabile nella pagina commenti. Se invece voglio modificare il link "commenta" in home page?

    Grazie di esistere, Ernesto.

    RispondiElimina
  2. @francesco_qci_
    Nella Home page c'è il link "Commenti" con accanto il numero di quelli già postati per ogni articolo. Puoi cambiare la scritta Commenti con un'altra
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
    Poi nella home page ci arrivano sempre pochi visitatori. Viene casomai aperta da quelli che sono rimasti positivamente influenzati dai contenuti del blog.

    RispondiElimina
  3. Ciao! Molto utile questo post!
    Esiste anche un qualcosa per personalizzare il link "Posta un commento" in fondo alla pagina del singolo post, usando il modulo pop-up??? Grazie mille!
    [Buon 2012!]

    RispondiElimina
  4. @MariaFelicia99
    Ci penserò ... forse ;D

    RispondiElimina
  5. @MariaFelicia99

    Se non ho capito male poni il mio stesso quesito, o sbaglio?

    RispondiElimina
  6. @MariaFelicia99

    Se non ho inteso male, poni lo stesso mio quesito, o sbaglio???

    RispondiElimina
  7. Innanzitutto grazie per tutti i consigli che giornalmente ci fornisci. Sono entrato nel mondo dei blogger da pochissimi giorni e, pur non conoscendo il linguaggio html, sono riuscito ad apportare numerose modifiche al mio blog grazie al tuo aiuto. Tanto premesso, volevo chiederti in che modo è possibile impaginare i commenti (incorporati sotto il post) con lo stile "giustificato"...perchè ho un'impaginazione con allineamento a destra che "stona" con il resto del post

    RispondiElimina
  8. @ ernesto

    Grazie per la celere risposta come sempre.
    Non so se realmente in home arrivano poche visite!!!
    Il problema è che il link "commenta" è poco visibile di defoult in blogger e per chi non è un "navigato" è pressocchè impossibile rintracciare e quindi stimolare l'interattività.
    Io cerco disperatamente una cosa simile:
    http://www.guru63.com/

    grazie per la pazienza

    RispondiElimina
  9. @ilmiodiritto
    Se sono allineati a destra probabilmente dipende dal template che hai scelto e non essendo ufficiale è difficile poi piegare alle nostre esigenze

    @francesco_qci_
    Cerca nell'ambito dei template gratuiti se trovi qualcosa di simile

    RispondiElimina
  10. finalmente i commenti visualizzati con la finestra popup,è sempre interessante leggere i tuoi post!!!!

    RispondiElimina
  11. @anna
    Grazie della considerazione ^^

    RispondiElimina
  12. Ciao, non riesco a mettere le avvertenze per i commentatori.
    Quando tento di salvare mi dice:
    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The element type "style" must be terminated by the matching end-tag "".

    Il codice che ho messo è scritto in questa immagine http://i.imgur.com/Wlo57.png . Puoi aiutarmi?

    RispondiElimina
  13. @SemmuSassaresi
    Manca la chiusura della parentesi graffa e la chiusura di style cioè
    }
    < /style > scritto senza spazi

    RispondiElimina
  14. Ciao, alcuni utenti del mio blog non riescono a commentare con i commenti incorporati. Che cosa posso fare?

    RispondiElimina
    Risposte
    1. @Alexn
      Ti riferisci ai commenti di Blogger o di Facebook? Visto il post in cui hai commentato credo si tratti di quelli di Blogger. Forse il problema dipende dall'introduzione dei commenti nidificati che per alcuni modelli non hanno funzionato. Magari prova a scegliere l'opzione finestra popup oppure "modulo incorporato sotto il post" invece di pagina intera.

      Elimina
  15. Ciao,

    volevo inserire delle avvertenze sotto la frase "Posta un commento", ma la stringa compare quattro volte. Quale devo modificare?

    RispondiElimina
    Risposte
    1. @Bastet
      Quella che ha anche il tag < h4 id
      Se ce ne sono più di una vai un po' a tentativi. Questo tool però credo che funzioni solo in alcuni modelli vecchi e personalizzati e non sia più valido per i template del Designer modelli

      Elimina
    2. Già... purtroppo non funziona. Non mi lascia nemmeno salvare il modello. Peccato perché sarebbe stata una personalizzazione utile. :(

      Elimina
    3. Update: Ho appena scoperto che con i nuovi modelli è molto semplice aggiungere un messaggio nel modulo commenti: basta andare in impostazioni > post e commenti > messaggio del modulo commenti.

      Temo che il caldo mi abbia fuso i pochi neuroni ancora funzionanti. :(

      Elimina
    4. @Bastet...
      Questo c'era anche nei vecchi modelli. Possono anche essere inseriti dei collegamenti. Solo che in alcuni modelli e con il modulo incorporato sotto il post la cosa non è esteticamente molto valida.

      Elimina
  16. E per sostituire "Nessun commento:" con il vecchio e caro "0 commenti" ? Non trovo la stringa...

    RispondiElimina
    Risposte
    1. @giuliasciannella
      Infatti non credo sia accessibile. Si può solo modificare class comments e id comments ma il numero pare off limits

      Elimina
  17. Per personalizzare anche lo sfondo dei commenti degli utenti tramite HTML c'è un modo?

    RispondiElimina
    Risposte
    1. @pandemion
      In teoria si può fare tutto. Dipende dal modello. Bisogna riuscire a capire quale è il foglio di stile o CSS interessato con Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      e poi aggiungere un nuovo CSS con la modalità illustrata in questo post.

      Elimina
    2. Ho dovuto scartabellare un po', ma finalmente ce l'ho fatta... Sono andato alla ricerca della stringa "comments" e dopo un po' di tentativi ce l'ho fatta... Grazie! ;)

      Elimina
  18. Ciao Ernesto scusami ho un problema:

    quando una persona commenta in un mio post ( per farti vedere il problema commenta in un mio post qualsiasi: http://ps3gameita.blogspot.it/2012/11/darkeboot-fixer-si-aggiorna-alla-v50.html ) le mie personalizzazioni scompaiono ed appare questo fastidiosissimo quick reply che dice "Aggiungi un commento" come faccio ad estirparlo ????? risolvendo così credo il mio problema... mi affido a te grz in anticipo :)

    RispondiElimina
    Risposte
    1. @OcramRosco
      Non vedo nulla di anomalo. Prova con un altro browser

      Elimina
  19. Ciao volevo farti una domanda sicuramente stupida. Sotto ai post del mio blog non si leggono i commenti come qui da te, bisogna cliccare sopra la voce "commenti" per leggere i commenti pubblicati dagli altri. Perché, come faccio a modificare il tutto? Grazie

    RispondiElimina
    Risposte
    1. @ Silvia
      Vai su Bacheca > Impostazioni > Post e Commenti > Posizione commento e nel menù verticale scegli Incorporato invece di Pagina Intera o Finestra popup. Poi vai in alto a destra su Salva Impostazioni.

      Elimina
    2. Ho fatto così ma non cambia nulla. Ti ringrazio comunque per la risposta ;)

      Elimina
    3. @ Questa personalizzazione si riferisce ai vecchi template e non a quelli del Designer Modelli

      Elimina
  20. Grazie sei sempre di aiuto, ma posso inserire anche il campo "Email" così l'utente può ricevere le notifiche delle varie risposte al suo commento?

    Grazie

    RispondiElimina
    Risposte
    1. Per quello dovrebbe cliccare su Iscriviti per email che si trova sotto il modulo per commentare in modo da ricevere un messaggio a ogni nuovo nuovo commento del post
      @#

      Elimina
    2. Si quella funzione l'ho vista, ma se un utente accede in modalità anonima non può applicare questa funzione

      Grazie della disponibilità

      Elimina
  21. Salve a tutti,io vorrei che alla fine di ogni post si potessero aggiungere e si visualizzassero i commenti proprio come in questo Vostro blog .Invece il mio blog e' cosi'http://personale-extra-stagionale.blogspot.it/2013/09/cortina-dampezzo.html

    RispondiElimina
  22. Ciao Ernesto. non me ne intendo molto di codice. Mi sai dire come faccio a inserire un link subito dopo "Posta un commento"? Tipo:

    Posta un commento
    Leggi qui (link)

    Grazie, e buona domenica!

    RispondiElimina
    Risposte
    1. :-( Vorrei inserire un link che rimanda alla mia comment policy, tutto qui. peccato! buon lunedì!

      Elimina
    2. Inserire un link di quel tipo è semplicissimo. È complicata la zona in cui lo desideri mettere
      @#

      Elimina
    3. Puoi usare il modulo di commenti andando su Impostazioni > Post e commenti > Messaggio del modulo dei commenti oppure seguire queste istruzioni
      http://www.ideepercomputeredinternet.com/2012/01/come-modificare-e-personalizzare-il.html
      @#

      Elimina
  23. come posso inserire una piccola gif che ho fatto io per invitare a commentare? grazie!

    RispondiElimina
    Risposte
    1. Per esempio al posto di
      <data:postCommentMsg/>
      puoi mettere questo codice
      <img src='URL DELLA GIF CARICATA SU PICASA'/>
      Lo puoi mettere anche subito dopo se vuoi continuare a vedere la scritta Posta un commento
      P.S. Ricordati di salvare il template
      @#

      Elimina
    2. grazie mille ma non riesco a trovare quella riga esatta, forse ora è un po' diverso?

      Elimina
    3. anzi ora l'ho trovata ma non sembra funzionare... boh

      Elimina
    4. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      È probabile che ci sia più di una riga di quel tipo (forse 4)
      @#

      Elimina
  24. Buonasera io invece ho un problema non mi appare più la possibilità nelle impostazioni di scegliere chi può commentare e non mi arrivano più le notifiche
    Cosa posso fare?

    RispondiElimina
    Risposte
    1. Non so se si tratta di un bug oppure di una opzione che tu hai attivato magari senza rendertene conto. Anfdando su Bacheca > Impostazioni > Post e commenti > Chi può inserire commenti, dovresti poter scegliere tra Chiunque, utente registrato, utente google e solo membri di questo blog. Se non fosse così prova a rivolgerti al forum
      https://productforums.google.com/forum/#!forum/blogger
      per sapere se altri hanno il tuo problema e se si tratta di un problema conosciuto consultando questo blog
      http://knownissues.blogspot.it/
      @#
      @#

      Elimina
    2. Lisa stai usando i commenti di Google+ per questo hai problemi di questo tipo e ti conviene ritornare a come era prima, leggi qui così ti schiarisci le idee:
      http://www.ideepercomputeredinternet.com/2013/04/commenti-blogger-googleplus.html

      Elimina
    3. Ho scritto al forum grazie.
      vediamo che succede.
      Andrea ho usato sempre i commenti g+ e da un giorno all'altro è sparita la possibilità di cambiare il settaggio.
      Devo dire che mi è anche sparita una finestra dal mio profilo g+ non vorrei aver combinato un guaio io :(

      Elimina
  25. Ciao, io vorrei che il messaggio che inserisco dalle impostazioni blogger venga visualizzato sopra il modulo dei commenti, non sotto, come potrei fare?

    RispondiElimina
    Risposte
    1. Con il tutorial di questo post dovrebbe visualizzarsi sopra al modulo come mostrato nello screenshot. Altro non ti so dire se non che quando ci sono i commenti nidificati per mostrarlo sempre sopra al modulo bisogna seguire quest'altro post
      http://www.ideepercomputeredinternet.com/2012/06/blogger-messaggi-commenti-modulo.html
      @#

      Elimina
  26. Ciao Ernesto, avrei solo la necessità di eliminare la scritta O commenti dal modulo lasciando solo la tabella appunto.
    Sai come fare?
    ecco il sito http://infoutili.blogspot.it/2015/10/conviene-acquistare-azioni-poste-italiane-come-guadagnare-facile-e-sicuro.html

    grazie

    RispondiElimina
    Risposte
    1. Prova con questo CSS
      #comments > h4:nth-child(2) {display:none;}
      da incollare sopra alla riga con /b:skin
      Potrebbe però nascondere anche altri elementi
      @#

      Elimina
  27. Grazie Ernesto,provo da pc appena possibile. Ma per la versione mobile suppongo ci siano altri css da creare. Ti chiedo perché ho già nascosto la scritta posta un commento nel desktop ma nel mobile appare sempre. Grazie se mi darai una mano

    RispondiElimina
    Risposte
    1. Per il mobile c'è lo stesso CSS del desktop
      #comments > h4:nth-child(2)
      @#

      Elimina
    2. Ciao Ernesto,scusa se ti disturbo NON riesco ad impostare la lista dei titoli dei post nella versione mobile in grassetto. Mi puoi aiutare per favore? grazie mille in anticipo.Buona serata
      il sito è questo : www.risparmioebenessere.it

      Elimina
    3. Quale lista? I titoli che si vedono nella home dal mobile? Sono già in grassetto
      @#

      Elimina
    4. Comunque prova con questo codice
      .mobile-index-title {font-weight:bold;}
      da incollare subito sopra alla riga ]]></b:skin>
      @#

      Elimina
    5. sei provvidenziale...........grazie tanto!!

      Elimina
    6. ho appena inserito anche questa stringa .popular-posts-title {font-weight:bold;}
      subito sopra alla riga ]]>
      per mettere in grassetto i titoli degli articoli piu' letti che si trova nel widget alla sinistra di ogni pagina ma non funziona. Dove sbaglio?

      Grazie ancora

      Elimina
    7. scusami parlo ovviamente della versione desktop

      Elimina
    8. @# Prova con
      .popular-posts > ul:nth-child(1) > li:nth-child(7) > div:nth-child(1) > div:nth-child(2) {font-weight:bold;}

      Elimina
    9. @# Aggiungendo altri elementi oltre al 7 come questo
      .popular-posts > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > div:nth-child(2) {font-weight:bold;}
      ecc.

      Elimina
  28. Scusami ernesto non ho capito bene, devo intercettare il selettore univoco per ogni titolo ed inserire altrettanti codici? Perchè on le due stringhe sopra mi mette in grassetto solo un titolo.
    Grazie

    RispondiElimina
    Risposte
    1. ho cercato invece il widget popular post ed ho aggiunto alla stringa
      list-style: none; questa altra font-weight:bold; ma mi modifica anche l'incipit di ogni articolo. Sai come ovviare per lasciare in grassetto solo il titolo??
      Grazie

      Elimina
    2. Devi aggiungere tante righe quanti sono gli elementi in questo modo
      .popular-posts > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) > div:nth-child(2) {font-weight:bold;}
      .popular-posts > ul:nth-child(1) > li:nth-child(2) > div:nth-child(1) > div:nth-child(2) {font-weight:bold;}
      .popular-posts > ul:nth-child(1) > li:nth-child(3) > div:nth-child(1) > div:nth-child(2) {font-weight:bold;} ecc
      @#

      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.