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://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%}
#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
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
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 -
@CaterinaPili
RispondiEliminaProva 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)
carino mi piace!! ma se voglio inserire, il modello commenti come wordpress, con nome, sito e mail lo posso fare?. Grazie
RispondiElimina@♥Francesca♥
EliminaAl momento no
Valutando, questo è uno dei post migliori che hai pubblicato, bella l'estetica, intuitiva l'interfaccia, molto personalizzabile e semplice da applicare nel Blog.
RispondiEliminaGOOD JOB !!!
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???
RispondiEliminaP.S sarebbe anche un bel post da pubblicare :)
@OcramRosco
EliminaStai sintonizzato che nei prossimi giorni potrei dedicare un post all'argomento. Non che non ne abbia già dedicati ...
io sono e sarò sempre sintonizzato a questo Blog =)
EliminaCarinissimo, inserito subito!
RispondiEliminaGrazie!
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.
@Tiziana+-+-+-
EliminaSi può fare ma se hai molte etichette è una cosa lunga
http://www.ideepercomputeredinternet.com/2010/03/etichette-icone-blogger-inserire-titolo.html
Grazie mille per il link... però non è esattamente l'effetto che vorrei.
EliminaQuesto 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! :)
@ Tiziana
EliminaProva 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 :)
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}
RispondiEliminaSpero si sia capito quello che intendo, per caso (e se non è troppo sbattimento) mi sai aiutare?
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@# Mi sa che non sia particolarmente semplice. Ora sono al cellulare, poi guardo meglio, senza impegno e senza farti illusioni :)
EliminaTranquillo, 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 :)
Eliminaciao, 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?
RispondiEliminaNon 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 @#
Eliminasi ovviamente tramite html, io ci ho provato ma non ci sono riuscito.. grazie lo stesso :)
Eliminaquanti pixel misura l'immagine colorata sotto la scritta aggiungi commento?. grazie.
RispondiEliminaL'icona rossa a forma di baffo? 10 pixel
Elimina@#