Cambiare lo sfondo dei commenti dell'autore del blog!

Più volte mi è stato richiesto come fosse possibile personalizzare lo sfondo dei commenti dell'autore su Blogger, come in questo blog. Nel mio caso è stato semplice: il template era già così. Ma con poche modifiche è possibile personalizzare qualunque altro template. Quindi, a davvero grande richiesta, eccomi qui a parlarne.

Di questo argomento c'è già chi ne ha parlato prima di me, anche se non su blog italiani (almeno che io sappia), e visto che mi piace la completezza dell'articolo di Blogger Buster, farò riferimento ad esso per l'esposizione, aggiungendo qualcosa di mio alla fine.

La principale difficoltà sarà trovare il punto di intervento nel template, visto che non esiste un vero standard e ognuno è strutturato a discrezione dell'autore, sia quelli predefiniti di Blogger che quelli amatoriali. Per questo motivo mi raccomando di farne il backup prima di cominciare: se qualcosa va male o non vi piace l'effetto, potrete sempre tornare indietro.

Trovare la sezione dei commenti nel vostro template

Dalla vostra bacheca, andate in Layout->Modifica HTML e selezionate "Espandi i modelli widget". Trovare questa porzione di codice html sarà l'operazione difficile. Fondamentalmente, il blocco dei commenti è una sezione di codice che contiene (sparse) le seguenti righe:

• <b:loop values='data:post.comments' var='comment'>
• <data:comment.author/>
• <data:comment.body/>

Per fare un esempio, nel template Minima la sezione dei commenti è la seguente:

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl>

Come vedete, ho evidenziato le tre righe che mi aspettavo di trovare. In linea di massima, il blocco dei commenti comincia spesso con:

<dl id='comments-block'>

e quasi sempre subito dopo segue:

<b:loop values='data:post.comments' var='comment'>

e il tutto finisce con:

</b:loop> </dl>

Ma quanto detto è puramente indicativo. In template personalizzati, potremmo trovare tutt'altro, anche se per certo la visualizzazione dei commenti è compresa tra le righe che inziano e finiscono con loop.

Cambiare il codice per evidenziare il commento dell'autore

Una volta individuata la sezione di codice dei commenti, sostituiamola totalmente con le seguenti righe:

<ul class='commentlist' style='margin: 0; padding: 0;'> <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.author == data:post.author'> <li class='author-comments' style='margin: 0 0 10px 0;'> <b:if cond='data:post.dateHeader'> <div class='commentcount'/> </b:if> <cite> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </cite> <br/> <div style='clear: both;'/> <b:include data='comment' name='commentDeleteIcon'/> <p><data:comment.body/></p> <div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a></div> <div class='clear'/> </li> <b:else/> <li class='general-comments' style='margin: 0 0 10px 0;'> <b:if cond='data:post.dateHeader'> <div class='commentcount'/> </b:if> <cite> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </cite> <br/> <div style='clear: both;'/> <b:include data='comment' name='commentDeleteIcon'/> <p><data:comment.body/></p> <div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a></div> <div class='clear'/> </li> </b:if> </b:loop> </ul>

Aggiugnere lo stile per cambiare i colori

A questo punto non ci resta che aggiungere la porzione di codice  per colorare sfondo e bordi dei nostri commenti. All'inizio del template, trovare la sezione usata da Blogger per personalizzarne caratteri e colori del template, che inizia con:

/* Variable definitions    ====================

Subito sotto, incollate queste righe:

<Variable name="authorcommentbgcolor" description="Sfondo del commento autore"           type="color" default="#FAFAF5" value="#FAFAF5"> <Variable name="authorcommentbordercolor" description="Bordo del commento autore"           type="color" default="#0D6AA6" value="#0D6AA6">

Cercate la seguente riga:

]]></b:skin>

E subito sopra incollate:

.author-comments {   background: $authorcommentbgcolor;   border: 1px solid $authorcommentbordercolor;   padding: 5px; }

Adesso potete salvare il template e se tutto è andato bene, da Layout->Caratteri e colori potrete personalizzare i colori di bordo e sfondo dei vostri commenti:

 

All'inizio avrete quelli che sono usati nel mio template, ma potrete cambiarli a vostro piacimento.

Ultime parole

Se utilizzate un template predefinito diverso da Minima, e trovate un punto d'intervento differente, lasciate un commento così può essere di riferimento per altri.