Pubblicato il 29/09/12e aggiornato il

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

commenti-blogger-discussione
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://lh5.googleusercontent.com/-C_TPhsLu7g8/UGarVgu4uAI/AAAAAAAAa8I/gcV5z-ta0Og/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


commenti-nidificati
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://lh3.googleusercontent.com/-Yr7eC3CALOU/UGarXs4SsxI/AAAAAAAAa8Q/ebLOH8lx-Hs/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://lh5.googleusercontent.com/-82cUFU0qgAY/UGarZnYEomI/AAAAAAAAa8Y/jF7IgEc-pNQ/s36/icona-autore-verde.gif

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

colore-verde-discussioni-blogger

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 -




23 commenti :

  1. appena inserito, è super, grazie !!!

    RispondiElimina
  2. dimenticavo ho usato questo colore :#990000 più adatto alla mia grafica e ho sostituito il tuo codice ma come faccio a modificare questo link :https://lh3.googleusercontent.com/-Yr7eC3CALOU/UGarXs4SsxI/AAAAAAAAa8Q/ebLOH8lx-Hs/s36/icona-autore-rosa.png con il mio colore?
    grazie!

    RispondiElimina
    Risposte
    1. @CaterinaPili
      Prova a creare una icona simile con un programma di grafica oppure puoi aprire l'icona del link in un programma di grafica e cambiare il colore (non sono un esperto di queste cose)

      Elimina
  3. carino mi piace!! ma se voglio inserire, il modello commenti come wordpress, con nome, sito e mail lo posso fare?. Grazie

    RispondiElimina
  4. Valutando, questo è uno dei post migliori che hai pubblicato, bella l'estetica, intuitiva l'interfaccia, molto personalizzabile e semplice da applicare nel Blog.
    GOOD JOB !!!

    RispondiElimina
  5. Ciao stavo vedendo questo articolo: http://blog.duypham.info/2010/11/emoticons-for-blogspot-work-in-ie.html dove spiegava in vietnamito come inserire delle emoticon veramente belle nei commenti di blog blogger DEMO: http://testblog-978.blogspot.it/2012/06/write-about-spice-up-your-blog.html?showComment=1349103071199#c6214998045022714019 il problema è che con il traduttore la pagina nn si capisce molto per cui nn riesco a capire dove devo inserire le stringhe di codice..... se sai come aggiungerle mi potresti dare una dritta dove inserirle???
    P.S sarebbe anche un bel post da pubblicare :)

    RispondiElimina
    Risposte
    1. @OcramRosco
      Stai sintonizzato che nei prossimi giorni potrei dedicare un post all'argomento. Non che non ne abbia già dedicati ...

      Elimina
    2. io sono e sarò sempre sintonizzato a questo Blog =)

      Elimina
  6. Carinissimo, inserito subito!
    Grazie!

    ps. come sempre ti faccio una richiesta: è possibile inserire un'immagine per un determinato tag? Esempio: tag cucina, quando si clicca sopra e appaiono tutti i post con il tag relativo, è possibile far apparire un'immagine prima dei post? Una sorta di copertina relativa all'argomento.
    Grazie in anticipo e scusa se lascio quest'idea in un commento.

    RispondiElimina
    Risposte
    1. @Tiziana+-+-+-
      Si può fare ma se hai molte etichette è una cosa lunga
      http://www.ideepercomputeredinternet.com/2010/03/etichette-icone-blogger-inserire-titolo.html

      Elimina
    2. Grazie mille per il link... però non è esattamente l'effetto che vorrei.
      Questo effetto accompagna ciascun post con una piccola icona diversa riferita alla categoria specifica.
      Io intendevo un'immagine/copertina (di apertura) e sotto tutti i post con uno specifico tag. Una sorta di header prima dei post di una determinata categoria. ;) scusami per le richieste supermegacomplesse! :)

      Elimina
    3. @ Tiziana
      Prova a vedere se ti va bene questa personalizzazione
      http://www.ideepercomputeredinternet.com/2011/06/aggiungere-una-descrizione-con.html
      Credo che più di così non si possa fare :)

      Elimina
  7. Ciao Ernesto, ho inserito questa personalizzazione ma ti chiedo un ulteriore favore (sempre che sia possibile farlo): ho modificato gli angoli della "nuvoletta"rendendoli rotondi e ho aggiunto un bordo di 1px per staccarla meglio dallo colore di sfondo del blog(come background della nuvoletta ho messo un colore molto chiaro ed è l'unico che secondo me si addice) ma non riesco ad aggiungere il bordino anche alla "codina" (oddio, come si chiamerà?) della nuvoletta, che se non erro viene gestita dal codice #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eeeeee;border-right:20px solid transparent;width:0;height:0;line-height:0}

    Spero si sia capito quello che intendo, per caso (e se non è troppo sbattimento) mi sai aiutare?

    RispondiElimina
    Risposte
    1. Ti lascio il link ad un post così forse riesci a capire meglio cosa intendo: http://www.kitchenbloodykitchen.com/2013/03/basmati-integrale-con-radicchio-e-uvetta.html?showComment=1363081523581#c4015633589149545234

      Elimina
    2. @# Mi sa che non sia particolarmente semplice. Ora sono al cellulare, poi guardo meglio, senza impegno e senza farti illusioni :)

      Elimina
    3. Tranquillo, non ti preoccupare. Io ho già provato senza successo (procedo un po' a caso ma prova di qua e prova di la di solito sulle cose semplici riesco) e speravo che tu avessi una soluzione rapida ma se ci devi perdere troppo tempo lascia stare, non voglio abusare della tua gentilezza :)

      Elimina
  8. ciao, grazie per questo articolo ho preso spunto per modificare i miei.. a me piacerebbe inserire il target blank nei link degli autori dei commenti, non è possibile farlo?

    RispondiElimina
    Risposte
    1. Non da questo codice che è formato tutto da CSS. Non so se può essere fatto operando in altre parti del modello ma certo non mi sembra semplicissimo @#

      Elimina
    2. si ovviamente tramite html, io ci ho provato ma non ci sono riuscito.. grazie lo stesso :)

      Elimina
  9. quanti pixel misura l'immagine colorata sotto la scritta aggiungi commento?. grazie.

    RispondiElimina
    Risposte
    1. L'icona rossa a forma di baffo? 10 pixel
      @#

      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.