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

• Emoticon di Facebook inserite sopra al modulo dei commenti -

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.

 

.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

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

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

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.