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



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.