Come separare o evidenziare i commenti su Blogger.

Dopo aver visto come separare i post con immagini e personalizzare la data dei commenti, vediamo come sia possibile modificare l'aspetto degli stessi commenti in una o più parti. Ricordo che ho già illustrato come evidenziare in un rettangolo colorato i commenti dell'autore del blog (seconda versione e terza versione). I commenti sono una parte essenziale del blog e penso che, specialmente nei blog che ne hanno molti, sia utile ordinarli con dei numeri o anche usando delle apposite icone. Vediamo subito come si possa utilizzare la classe di stile dei commenti per inserire una linea colorata di divisione.

Bisogna andare su Modello > Modifica HTML > Procedi, cercare la riga ]]></b:skin> e, subito sopra, incollare il codice

#comments-block .comment-footer {
border-bottom:1px solid #003366; /* Bordo inferiore nei commenti */
padding-bottom:10px;
}

dove la linea è stata introdotta sotto forma di bordo inferiore e può essere personalizzata consultando il post sullo stile dei bordi. Ho anche inserito un margine per distanziare commento e commento (10px). Questo valore può essere personalizzato e, inserire quello più adatto, dipende dal modello che stiamo utilizzando. Ecco che aspetto avranno i commenti dopo questa modifica

Questo codice può essere usato anche insieme a quello per la personalizzazione della data nei commenti. Al posto di una semplice linea si può usare come separatore dei commenti anche una immagine. In questo caso il codice potrebbe diventare così

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1AZA1CfW05TTvH4CnEjsbz3x0QE_-br7zf-9AzvTE82Ru-D-CA8a4MrFaJYNNEujXIxRXkDzrvp-nn3IQI5zQE-UWbjKolaNKuqt3RwBUuY9E39BHmW8S7p-4mGsuyyZwMpqsLIBUpfo/s400/dividers_96.gif);
background-repeat:repeat-x; /* Ripetizione della immagine in orizzontale */
background-position:center bottom;
height:40px;
}

dove è stata inserita una immagine di background il cui URL è colorato di rosso e se ne può personalizzare l'altezza (40 pixel inseriti per questa immagine che è alta 17 pixel) anche per distanziare adeguatamente i vari commenti. Ecco come si visualizzeranno i commenti in questo caso

 

COME MODIFICARE LO SFONDO DEI COMMENTI DI UN BLOG SU BLOGGER

Facciamo un ulteriore passo in avanti nella personalizzazione dell'aspetto dei commenti. Cerchiamo di modificare il box in cui appaiono scegliendone per esempio il colore di sfondo. Bisogna andare su Layout > Modifica HTML > Procedi e espandere i modelli widget. E' consigliato di fare un backup del template prima di effettuare questa modifica. Si cerca mediante F3 o Ctrl+F la linea

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

quindi, subito sotto, si incolla quest'altra riga

<div class='box-commenti'>

Si scorre il codice fino a trovare il tag

</b:loop>

e, subito sopra, si incolla l'altro tag

</div>

Si salva il modello. Si cerca ora la riga  ]]></b:skin> e, immediatamente sopra, si incolla il seguente CSS

.box-commenti {
background:#E5E5E5; /* Colore di sfondo */
border-top:1px solid #003366; /* Stile bordo superiore */
border-bottom:1px solid #003366; /* Stile bordo inferiore */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#191919; /* Colore dei commenti */
}
.comment-timestamp { /* Data e ora dei commenti */
font-style:italic;
font-size:10px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

Si salva nuovamente il modello e i commenti avranno preso questo nuovo aspetto

Vediamo adesso come far prendere a ciascun box del commento una forma arrotondata ricordandoci che i tag in questione non funzioneranno con Internet Explorer 9 e precedenti ma invece dovrebbero essere compatibili con IE10 che sarà immessa nel mercato dei browser insieme al sistema operativo Windows 8 nella prossima primavera anche se esistono già delle versioni in beta. Il codice da incollare sempre sopra alla stessa riga in questo caso diventa

.box-commenti {
background:#E4E4E4; /* Colore di background */
border:1px solid #003366; /* Stile del bordo */
-moz-border-radius: 11px;  /* Raggio di curvatura del box per Firefox */
-webkit-border-radius: 11px; /* Raggio di curvatura del box per Safari e Chrome */
border-radius: 11px;
margin-bottom:20px; /* Distanza tra due commenti */
}
.comment-body {
padding:10px; /* Distanza interna */
color:#191919; /* Colore dei commenti */
}
.comment-timestamp { /* Stile della data dei commenti */
font-style:italic; /* Corsivo */
font-size:10px; /* Dimensione caratteri della data */
padding-right:10px; /* Distanze laterali interne */
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left; /* Avatar sulla sinistra del box right per porlo a destra */
position:static;
margin-right:15px; /* Distanze tra avatar e gli altri elementi */
margin-left:5px;
margin-top:5px;
}

Dopo aver salvato il modello, i commenti avranno preso questo aspetto

I parametri in rosso possono essere personalizzati in funzione dei colori e delle misure del layout del nostro blog. Ricordo che i commenti colorati di verde illustrano il significato di ciascun parametro e, in fase di installazione, possono essere cancellati o lasciati a futura memoria nel caso si debba procedere a una nuova modifica del codice.  Tutto il blocco di codice che inizia con .comment-timestamp riguarda la personalizzazione della data dei commenti e può essere tolto nel caso non si voglia modificare il suo aspetto.