Pubblicato il 02/01/12e aggiornato il

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

commenti-blogger-linea-distanziatrice

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://lh5.googleusercontent.com/-4WIIVBcuP8k/TwGEfWf27gI/AAAAAAAAV7c/QxUdKs6DqSE/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

 

commenti-separati-da-immagine

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

commenti-personalizzati

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

commenti-personalizzati-blogger

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.





6 commenti :

  1. Ciao Ernesto, scusa se ti disturbo ma fino a martedì nei miei due blog funzionava la personalizzazione dello sfondo dei commenti che avevo inserito un anno fa grazie ai tuoi consigli. Come mai? Devo ripristinare tutto?
    Ti ringrazio.
    Erika
    www. erikafotoviaggiando.blogspot.com

    RispondiElimina
    Risposte
    1. Ci sono state delle modifiche epocali su Blogger riguardo ai commenti. Leggiti questi post
      http://www.ideepercomputeredinternet.com/2012/01/blogger-introduce-le-risposte-e-la.html
      http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html
      http://www.ideepercomputeredinternet.com/2012/01/come-visualizzare-licona-dellautore-nei.html
      http://www.ideepercomputeredinternet.com/2012/01/altro-metodo-per-attivare-il-link.html

      Elimina
  2. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. CiaoooO! HO UN ENORME PROBLEMA D:
    Io ho questo blog su blogger femminilizzando.blogspot.com e non riuscivo a capire come le persone potessero commentare se non potevano mettere il proprio nome (non avevo visto NOME/URL) e quindi sotto consiglio di uno mi sono iscritta a Disqus.
    Ieri ho scoperto il NOME/URL e quindi ho eliminato il mio account Disqus e mi hanno detto che ci vogliono 48h.
    Però mi sono accorta che adesso non c'è nè Disqus nè i commenti di blogger.

    E' un problema che scomparirà appena sarò eliminata definitivamente da Disqus o continuerà a persistere? E come rimedi se è la seconda opzione? Grazie dell'aiuto!

    RispondiElimina
  5. @ennenews
    Ho provato a commentare nel tuo blog ed è tutto OK (a parte che ci sono la moderazione dei commenti e il controllo visivo che certo non inducono a commentare volentieri ...)

    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.