Come personalizzare l'aspetto del nome del commentatore su Blogger.

Dopo aver illustrato come inserire il commento dell'autore del blog in un rettangolo vediamo come sia possibile personalizzare l'aspetto del nickname del commentatore sia esso l'autore o un semplice lettore. Ricordo che andando su Bacheca > Impostazioni > Commenti, si possono scegliere quattro opzioni per l'identità di coloro che possono lasciare il proprio contributo

1. Chiunque
2. Utenti registrati anche OpenID
3. Utenti con un account Google
4. Solo membri del blog

La prima opzione è la più permissiva ma consente anche i commenti anonimi che sono spesso fonte di spam. Fino a qualche mese fa anche in questo blog era stata selezionata l'opzione che chiunque potesse commentare. Poi sono cominciate a arrivare tonnellate di spam da robot situati in Asia e ho dovuto scegliere di ricevere commenti solo da utenti con una identità accettata da Blogger. Questa personalizzazione è dunque possibile solo per i nickname degli utenti registrati. Se si è scelta la prima opzione, i commenti anonimi resteranno invariati mentre muterà l'aspetto degli username degli utenti registrati.

Non cambierà il testo del commento. Ecco un esempio

  In questo caso ho scelto colore del testo, dimensioni più grande, colore di sfondo, bordo e grassetto ma si possono inserire tutte le variazioni di stile che vogliamo. Occorre andare su Design > Modifica HTML e salvare il modello completo. Espandere i modelli widget e cercare il seguente blocco di codice cliccando su F3 o pigiando Ctrl+F

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

Occorre modificarlo in questo modo

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><span class='commentatore'><data:comment.author/></span></a>

dove i tag aggiunti sono stati colorati di rosso. Adesso cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo una classe simile a questa

.commentatore {
font-size: 14px; /* Dimensione caratteri */
color:#940F04;  /* Colore testo */
font-family: Arial,helvetica,sans-serif, Trebuchet MS; /* Famiglia caratteri */
font-weight:bold; /* Stile testo */
border:1px solid #003366; /* Stile bordo */
background:#B4DAFF;   /* Sfondo */
}

Salvate il modello. Nella classe che si è creata possono essere modificati tutti i parametri che vogliamo. Alcuni che non ci interessano possono essere anche tralasciati come per esempio il background,gli stili dei bordi o il loro colore. Un altro esempio di classe potrebbe essere quest'altro

.commentatore {
font-size: 14px;
color:#4EC6F4;
font-weight:bold;
}

che è molto più minimalista e che produce questo risultato

Se non ci piace il grassetto possiamo sostituire bold con normal. Se  ci piace il corsivo possiamo aggiungere la riga font-style: italic; prima della parentesi graffa di chiusura.