Come personalizzare lo stile dei commenti nidificati.

Come personalizzare i commenti nidificati di Blogger aggiungendo un ribbon a quelli dell'autore, colorando il numero dei commenti e il pulsante Aggiungi un commento.

L'introduzione delle risposte nei commenti di Blogger ha certamente migliorato questa sezione dei blog su questa piattaforma. Ci sarebbero però ancora molte cosa da fare quali quella di poter scegliere se visualizzare per primi i commenti più vecchi o quelli più recenti per evitare lunghi scroll della pagina in articoli molti commentati. Indubbiamente le discussioni nei commenti hanno anche avuto un impatto estetico positivo. Il loro aspetto è determinato da una serie molto lunga di fogli di stile.

Ho già presentato in passato una modifica dell'aspetto dei commenti nidificati relativamente ai pulsanti Rispondi, Elimina e Aggiungi. Adesso facciamo un piccolo passo in avanti e modifichiamo in modo più incisivo il layout delle discussioni su Blogger. In particolare sarà aggiunto un ribbon colorato ai commenti postati dall'autore e il pulsante Aggiungi un commento prenderà tutta l'area del post.

Ecco gli screenshot dei commenti prima e dopo le modifiche introdotte

Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> e subito sopra si incolla questo codice

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1I_ragA26mbSBskYV1jXX5VqTcZqU3KB49LfTTwq_OI9Kgcy6kzAsjwwcnQByGoIi0bDUSqs8SNYs1EaDwsYIGR064iP7hli3N47UYADuWNCiD3CTkstIQB1pzGpX6otwtGWksCErm60/s36/icona-autore-blu.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Dopo aver salvato il modello i colori dei commenti saranno questi

Per avere il colore rosa come nel primo screenshot occorre modificare il codice del colore di background da #1e05d8  in #d80556 e l'URL dell'immagine del nastro dell'autore del post

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJvMnRiDungokQywSvjHTCimIWfV17uLlZGFlkzYpjZF4jzCqE7suLp_nQMCC9P6LoS9Ou0tTAzIRmQYMd70WsZUK2YUu9gLiS6ttqcY5M53jApjyH-dG3YdqJLyySmDjwxJm1J4ONfYw/s36/icona-autore-rosa.png

Per il colore verde il codice HEX del background va modificato in #56d805 e l'URL della immagine sarà

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fbQek3_zTRoKRHI90VX-lZM8lBwZuaVrn-RFxMcRCFKckeGJGDVtaeRIwQf15XJMuQGwxrAU03oQoYJOGlHKpspKzBaRWOIJISBx3XqmuqxoXJzVpSmegbDjkiZ_A2yjV5AyBriEq_o/s36/icona-autore-verde.gif

In questo ultimo caso l'aspetto delle discussioni diventerà il seguente

Ricordo che il funzionamento di questa personalizzazione dipenderà come sempre dal modello che si utilizza. A maggior ragione in questo caso visto che molti modelli scaricati da internet non hanno implementato la funzione dei commenti nidificati. 

Fonti | Paul Crowe e Pham Duy -