Pubblicato il 31/03/11e aggiornato il

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

nickname personalizzato  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

stile nome commentatore

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.





14 commenti :

  1. Ho appena implementato i commenti anche nel mio sito, mi sapresti dire come mai tra "posta un commento" e i pulsanti di navigazione "precedente", "home" e "successivo" c'è un eccessivo spazio bianco?

    RispondiElimina
  2. @Calcio Napoli 365
    La mia impressione è che tu abbia inserito un banner pubblicitario in quella zona che non si vede per una qualche ragione (mancanza di parola chiave, codice inserito male, ecc)

    RispondiElimina
  3. @Parsifal:

    Ciao grande, altro articolo molto utile. Grazie. :)

    Per quanto dice "Calcio Napoli", ti faccio notare che è un 'problema' che hanno tutti coloro i quali usano i commenti con il frame sotto l'articolo. Io stesso ho questo eccessivo spazio vuoto e non sono mai riuscito ad eliminarlo. Forse tu sei in grado, hehehe.

    Facci sapere. :D

    Ciao.

    RispondiElimina
  4. @LeNny

    Stesso problema, anche a me piacerebbe ridurre questo spazio.

    Ciao

    RispondiElimina
  5. @Ernesto T.
    No Ernesto, non c'è nessun banner in quella zona...:(

    RispondiElimina
  6. @LeNny
    @Mirò
    @CalcioNapoli
    E' una cosa che mi giunge nuova. Mi informerò se e come sia possibile risolvere.

    RispondiElimina
  7. @Ernesto T.

    Anche implementando DISQUS si ottiene quell'antiestetico spazio bianco tra i commenti e i pulsanti di navigazione...:(

    RispondiElimina
  8. @Mirò

    Tranquillo che ora con Parsifal una soluzione la troviamo. :)))

    RispondiElimina
  9. Ciao Parsifal, come posso far apparire l'icone del bloggatore che commenta, come hai fatto tu, al posto del piccolo logo di blogger opp altro?

    RispondiElimina
  10. @Lorenzo
    Segui le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2009/09/blogger-introduce-la-foto-o-avatar-del.html

    RispondiElimina
  11. ...e per personalizzare solo l'aspetto del nome dell'amministratore del Blog?.

    grazie

    RispondiElimina
  12. @francescomisc
    Il sistema sarebbe quello di creare una condizione secondo cui se il nome del commentatore è uguale a quello dell'autore del blog viene inserita una determinata classe. E' una cosa abbastanza complessa. Leggiti questo post
    http://www.ideepercomputeredinternet.com/2011/07/come-personalizzare-il-box-dei-commenti.html
    e quest'altro
    http://www.ideepercomputeredinternet.com/2011/07/come-evidenziare-i-commenti-dell-del.html
    per poi vedere se puoi andare più avanti. La condizione comunque è questa
    <b:if cond='data:comment.author == data:post.author'>

    RispondiElimina
  13. grazie ernesto, vedo un po cosa posso fare

    RispondiElimina

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.