Pubblicato il 18/11/14e aggiornato il

Modificare lo stile dei commenti nidificati di Blogger.

Come personalizzare lo stile dei commenti e dei pulsanti Rispondi e Elimina in Blogger.
Blogger ha introdotto i commenti nidificati nel Gennaio del 2012 e da allora non è che siano state introdotte altre migliorie grafiche. Per questa ragione in molti siti vengono aggiunti degli opportuni CSS per crearsi uno stile personalizzato dei commenti. Si può incidere nell'aspetto dei pulsanti Rispondi e Elimina oppure intervenire più in profondità per modificare tutto il layout dei commenti.
Ricordo che il pulsante Elimina viene visualizzato solo dall'amministratore del sito e quindi non conviene perderci troppo tempo. In questo articolo voglio proporvi un nuovo stile per i commenti di Blogger che poi può essere ulteriormente modificato specialmente nei colori per adattarlo al proprio sito.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a quella si incolla il codice seguente

<style>
.comments .comment-block {
background: #F8F8F8;
color: #333;
box-shadow: 0 4px 10px #EEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEE !important;
border-radius:10px;
font: 1.190em/1.2 Georgia; /* Famiglia di font */
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px; /* Dimensione contenitore avatar circolare */
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;  /* Dimensione avatar */
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 13px;
}
.comments .comments-content .user a{
font-size: 14px;
color: #2f6b9f; /* Colore nome commentatore */
}
.comments .comments-content .datetime a:hover{
color: #333/* Colore della data al passaggio del mouse */
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
color:#f00 !important;
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}
.comment-actions a {
color:#f00 !important; /* Colore pulsanti */
}
.comments .continue a:hover {
color:#00f !important;
}
.comment-actions a:hover {
color:#00f !important; /* Colore pulsanti al passaggio del mouse */
text-decoration:none;
position: relative;
bottom: 1px; /* Salto in alto e a sinistra di 1 pixel con il cursore */
right: 1px;
}
</style>

Si salva il modello.  L'aspetto dei commenti risulterà essere il seguente

stile-commenti-nidificati

che possono anche essere visti dal vivo in questo post di demo



Accanto ai principali parametri del codice ho inserito di commenti di colore verde per illustrarne il loro utilizzo che riguardano i codici dei colori  e la famiglia di font e che possono essere modificati.




18 commenti :

  1. Mi piace questa nuova grafica.
    Come si modifica la dimensione del carattere dei commenti? Quale riga bisogna considerare?

    RispondiElimina
    Risposte
    1. font: 1.190em è il comando per la dimensione dei caratteri. Prova con font: 1.4em/1.2 se per esempio vuoi aumentare la dimensione. L'unità di misura "em" è la dimensione dei caratteri predefinita del sito. quindi mettere 1.0em significa la dimensione standard mentre con 1.5em si ha una dimensione del 50% più grande e con 0.9em ha una dimensione del 10% più piccola.
      @#

      Elimina
    2. Poi /1.2 dopo la dimesnione significa che l'altezza della riga è 1.2em. In sostanza questo comando
      font: 1.2em/1.2 Georgia;
      porta a avere dei caratteri del 20% più grandi di quelli predefiniti con una altezza della riga pure del 20% superiore a quella predefinita mentre Georgia è la famiglia di caratteri. Testando puoi trovare la combinazione più giusta. Una altezza della riga più piccola mostra i commenti su più righe in modo più compatto mentre succede il contrario se si aumenta l'altezza della riga
      @#

      Elimina
    3. Grazie mille, mi piace molto il risultato!

      Elimina
  2. Ovviamente non possibile sulle "Dinamiche". Grazie ;)

    RispondiElimina
  3. Ciao Ernesto,
    Sono riuscita a mettere i commenti seguendo la guida!
    Solo una cosa, il nome di chi commenta è sposato leggermente verso destra in confronto al resto del testo!
    Come posso mettere tutto verso sinistra?
    Grazie!

    RispondiElimina
    Risposte
    1. Ogni modello è una storia a sè. Prova a testare delle modifiche ai valori di margin e eventualmente prova a incollare sotto questa riga
      .comments .comments-content .user a{
      un'altra riga tipo
      margin-right:50px;
      per poi vedere che succede
      @#

      Elimina
  4. Risposte
    1. Diminuisci la dimensione degli avatar passando da 60 pixel a 48 che è la misura ufficiale di Blogger. Aumentando le misure c'è un certo effetto sgranatura che comunque secondo me si nota poco
      @#

      Elimina
  5. Grazie, molto utile.
    Se modifico il font (quello che nel codice è "Georgia") si modifica solo quello del nome e della data, non quello del testo del commento. È possibile modificare anche quello?

    RispondiElimina
    Risposte
    1. @# Prova a incollare la riga
      font: 1.190em/1.2 Georgia;
      anche sotto a
      .comments .comment-thread.inline-thread {
      e sotto a
      .comments .continue {
      e pure sotto a
      .comments .comments-content .comment {

      Elimina
  6. Ciao Ernesto,
    ho installato il widget molto bello tra l'altro. Ma ho soltanto un problema: quando clicco su Elimina o Rispondi non succede nulla, è come se il collegamento ipertestuale fosse bloccato, hai presente la manina? Non c'è.
    Sai come sbloccare il link. Tieni conto che è un modello responsive molto bello versione free quindi può essere che abbiano bloccato questa funzione. Altre funzioni sono riuscita a ripristinarle, questa invece no.
    Grazie

    RispondiElimina
    Risposte
    1. Capita anche a me nella versione mobile mentre il pulsante Aggiungi un commento funziona sempre. Non ho la soluzione purtroppo
      @#

      Elimina
    2. O.K. grazie comunque per la risposta

      Elimina
  7. Ciao Ernesto,
    scusa una domanda che non c'entra per niente con il Post. Ho visto che, all'interno del widget Articoli Correlati con Miniature, hai inserito della pubblicità mi sembra che con AdSense. Sapresti dirmi come si fa per non andare oltre i 6 banners per pagina? Grazie mille.

    RispondiElimina
    Risposte
    1. Non è cosa che può fare chiunque. Sono chiamati Contenuti per corrispondenza e bisogna avere il sito abilitato
      http://www.ideepercomputeredinternet.com/2015/09/contenuti-corrispondenza-adsense-blogger-modello.html
      Non so quali siano le condizioni per tale abilitazione. Credo traffico, qualità e altri parametri ma non sono sicuro
      @#

      Elimina
    2. Grazie mille preciso come al solito!!!

      Elimina

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.