Pubblicato il 18/11/14 - aggiornato il  | 23 commenti :

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.


23 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. Ciao,ho usato questo codice,ma come mai le foto dell'avatar si vedono sfuocati?

    RispondiElimina
    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
  8. Nel mio blog l'avatar viene tagliato a metà. Ho provato a ridurre le dimensioni dell'avatar per es. da 60 a 50 ma non cambia nulla.
    Sai mica se cè una soluzione?
    Grazie e auguri di un Buon Anno

    RispondiElimina
  9. Se viene tagliato prova a cambiare la dimensione dell'avatar nel codice è scegli 100 per width e height
    @#

    RispondiElimina
  10. Caro Ernesto, mi rendo conto che il post è un po' datato, ma ho un problema coi commenti nidificati.
    Se guardi il mio post più recente, gli ultimi due commenti, rispetto agli altri, risultano sfalsati e non so bene dove mettere le mani.
    Inoltre, se ci fai caso, nei commenti di risposta (tutti), la data risulta troppo in basso rispetto al nome dell'autore del commento.
    Tu puoi aiutarmi a sistemare il codice?

    Grazie mille!

    RispondiElimina
    Risposte
    1. Anche in questo blog i commenti nidificati non vanno bene nella versione mobile. Se hai preso come base questo post puoi tentare di modificare qualcosa usando lo strumento di Chrome
      http://www.ideepercomputeredinternet.com/2017/08/chrome-developer-tools.html
      per trovare le classi e gli ID per poi provare a aggiungere o modificare i tag margin. Puoi provare anche a cambiare qualcosa nel codice. Per esempio

      margin:0px 0px 0 -28px;

      sotto la riga

      .comments .avatar-image-container {

      serve per spostare il contenitore dell'avatar. Con questi dati ha una distnza 0 in tutte le direzioni e una distanza -28 pixel dalla parte sinistra cioè è stato avvicinato di 28 pixel a sinistra. Il primo valore di margin imposta la distanza dall'alto mentre gli altri tre la distanza dalle altre direzioni procedendo in senso orario. Alcuni elementi non hanno il tag margin ma questo può essere aggiunto se c'è l necessità di spostarlo in relazione al resto del layout. Spero di esserti stato di aiuto.
      @#

      Elimina
    2. Intanto grazie per i tuoi suggerimenti. Credo di aver sistemato.
      Ho disattivato la versione mobile quindi dovrebbe vedersi il tema desktop.
      Spero di esserci riuscita!

      Grazie del supporto

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy