Cambiare lo sfondo dei commenti dell'autore del blog!


imagePiù volte mi è stato richiesto come fosse possibile personalizzare lo sfondo dei commenti dell'autore su Blogger, come in questo blog. Nel mio caso è stato semplice: il template era già così. Ma con poche modifiche è possibile personalizzare qualunque altro template. Quindi, a davvero grande richiesta, eccomi qui a parlarne.

Di questo argomento c'è già chi ne ha parlato prima di me, anche se non su blog italiani (almeno che io sappia), e visto che mi piace la completezza dell'articolo di Blogger Buster, farò riferimento ad esso per l'esposizione, aggiungendo qualcosa di mio alla fine.

La principale difficoltà sarà trovare il punto di intervento nel template, visto che non esiste un vero standard e ognuno è strutturato a discrezione dell'autore, sia quelli predefiniti di Blogger che quelli amatoriali. Per questo motivo mi raccomando di farne il backup prima di cominciare: se qualcosa va male o non vi piace l'effetto, potrete sempre tornare indietro.

Trovare la sezione dei commenti nel vostro template

Dalla vostra bacheca, andate in Layout->Modifica HTML e selezionate "Espandi i modelli widget". Trovare questa porzione di codice html sarà l'operazione difficile. Fondamentalmente, il blocco dei commenti è una sezione di codice che contiene (sparse) le seguenti righe:

  • <b:loop values='data:post.comments' var='comment'>
  • <data:comment.author/>
  • <data:comment.body/>

Per fare un esempio, nel template Minima la sezione dei commenti è la seguente:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Come vedete, ho evidenziato le tre righe che mi aspettavo di trovare. In linea di massima, il blocco dei commenti comincia spesso con:

<dl id='comments-block'>

e quasi sempre subito dopo segue:

<b:loop values='data:post.comments' var='comment'>

e il tutto finisce con:

</b:loop>
</dl>

Ma quanto detto è puramente indicativo. In template personalizzati, potremmo trovare tutt'altro, anche se per certo la visualizzazione dei commenti è compresa tra le righe che inziano e finiscono con loop.

Cambiare il codice per evidenziare il commento dell'autore

Una volta individuata la sezione di codice dei commenti, sostituiamola totalmente con le seguenti righe:

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>

<div class='clear'/>

</li>

<b:else/>

<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Aggiugnere lo stile per cambiare i colori

A questo punto non ci resta che aggiungere la porzione di codice  per colorare sfondo e bordi dei nostri commenti. All'inizio del template, trovare la sezione usata da Blogger per personalizzarne caratteri e colori del template, che inizia con:

/* Variable definitions
   ====================

Subito sotto, incollate queste righe:

<Variable name="authorcommentbgcolor" description="Sfondo del commento autore"
          type="color" default="#FAFAF5" value="#FAFAF5">
<Variable name="authorcommentbordercolor" description="Bordo del commento autore"
          type="color" default="#0D6AA6" value="#0D6AA6">  

Cercate la seguente riga:

]]></b:skin>

E subito sopra incollate:

.author-comments {
  background: $authorcommentbgcolor;
  border: 1px solid $authorcommentbordercolor;
  padding: 5px;
}

Adesso potete salvare il template e se tutto è andato bene, da Layout->Caratteri e colori potrete personalizzare i colori di bordo e sfondo dei vostri commenti:

image 

All'inizio avrete quelli che sono usati nel mio template, ma potrete cambiarli a vostro piacimento.

Ultime parole

Se utilizzate un template predefinito diverso da Minima, e trovate un punto d'intervento differente, lasciate un commento così può essere di riferimento per altri.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

56 commenti:

Den ha detto...

Inserito!!! Anche questa volta, seguendo le tue chiarissime spiegazioni, sono riuscito a migliorare il mio blog! Continua così!

My Ricettarium ha detto...

Fatto!!!!!! perfettissimo .-)))) grazie ancora....

* Milvi * ha detto...

Scusa l'ignoranza e se magari è un argomento che hai già trattato e io non l'ho trovato, ma come si fa a cambiare lo sfondo delle colonne di un template in modo da renderle trasparenti e che risulti solo lo sfondo? Mi sono fatta capire? Grazie, sei sempre molto chiaro nelle tue spiegazioni. Ciao Milva

Roberta Filava ha detto...

ho aggiunto il tuo link al mio blog...ti informo..
grazie
roberta

http://robertafilavafilava.blogspot.com/

Tenebrae ha detto...

@milvi: non ne ho mai parlato, ma è una cosa che mi è stata chiesta spesso, quindi rimani nei paraggi perchè ho già in coda l'articolo :)

Anonimo ha detto...

sul template "illacrimo" non trovo la parte

/* Variable definitions
====================

proprio non c'è... dove inserisco le righe che indichi? ho provato in vari punti, ma mi si sballa tutto!!! ;-)

Ciao e grazie per aver esaudito la mia richiesta.

Iole ha detto...

Ciao Tenebrae,
ho seguito le tue istruzioni e sono riuscita a impostare lo stile dei commenti.
Nel popup però hanno tutti lo stesso stile? Cosa posso fare?
Grazie, Iole

Tenebrae ha detto...

@iole: nel popup niente purtroppo, non è parte integrante del template, ma un oggetto esterno che solo blogger può modificare

@forrest: illacrimo è il template che meno di tutti permette personalizzazioni di caratteri e colori, un vero orrore di programmazione... comunque nel tuo caso devi incollare il codice sopra la riga con:

#navbar-iframe {

Anonimo ha detto...

Ciao, vedo che gli altri sono riusciti dove io fallisco. Pur avendo seguito alla lettera quanto dici di fare per modificare lo sfondo dei commenti dell'autore il salvataggio delle modifiche genera il seguente codice di errore: bX-sn404s. Potresti dirmi di più? Grazie anticipatamente

Tenebrae ha detto...

@anonimo: potrebbe dipendere da errori già presenti nel template... prova a fare una modifica semplicissima (tipo un invio) e salvare e vedi se ti da lo stesso il problema

coscienza critica ha detto...

Ciao :-)
Anche io non son riuscito, mi dava 'errore di chiusura...' (forse ho omesso un '>'), ci riproverò.
Sempre in gamba ;-)

Vinnie ha detto...

Ciao Tenebrate

Innanzitutto complimenti per il tuo lavoro in questo blog e per le tue guide veramente utili e spesso indispensabili che ci aiutano un pò tutti a configurare e sfruttare al meglio blogger. Secondo io ho un blog dove scrivo e raccolgo guide all' utilizzo del pc, pc software,hardware,internet ecc e dato che il tuo blog è una guida ti ho inserito nei blog consigliati. Se ti va dagli un occhiata http://guidami.blogspot.com/

Vinnie ha detto...

mi correggo Tenebrae non Tenebrate....è che ho copiato il nickname da un altro utente che ha commentato....copiare non rende mai...:D

Tenebrae ha detto...

@vinnie: grazie per aver linkato il mio blog vinnie, ho subito ricambiato... complimenti per il blog, pieno di informazioni utili

Anonimo ha detto...

Grazie per la risposta!

A presto.

Forrest

Anonimo ha detto...

E pure funziona!!! ;-)

Marevan ha detto...

Ho fatto tutto quello che hai detto, non mi ha dato errori, ma il mio commento si vede come quello degli altri :o(

Marevan ha detto...

Come non detto !! Funziona :o)

Venezio ha detto...

che bello le tue spiegazioni sono semplicissime e funzionano

Autore ha detto...

io ho il template garland e non riesco a trovare
/* Variable definitions
====================
cosa posso fare?

Tenebrae ha detto...

@lulaj: puoi incollare il tutto sotto

Distributed by: http://BTemplates.com
----------------------------------------------- */

se non dovesse funzionare, dovrai usare direttamente i codici dei colori invece di $authorcommentbgcolor e $authorcommentbordercolor, usando la codifica rgb che spiego qui

Francio McLintock#5 ha detto...

Sei un idolo!

Vinnie ha detto...

Ciao Tenebrae,

Oggi ti sto tartassando ma i post del tuo blog sono come le ciliegie uno tira l' altro (maledetti articoli correlati! :D)

Questi due giorni ho un pò di tempo libero quindi ho applicato un bel pò di modifiche al mio blog seguendo le tue guide e tutto è andato perfettamente. Anche il cambio dello sfondo commenti dell' autore.

Tranne un piccolo particolare:

Nel (Layout- Caratteri e colori) dopo aver apportato questa modifica è apparso come dici in guida la voce Sfondo del commento autore e Bordo del commento autore quindi scelgo i colori salvo e fin qui ok. Ho rilasciato un commento per fare la prova ma Sfondo e Bordo non vengono visualizzati ovvero i miei commenti sono rimasti identici a prima.

Ho provato anche altre combinazioni di colori ma niente.

Credi che posso risolvere questo problema o mi conviene rimettere il template precedente a questa modifica?

P.S. Quando ho applicato questa modifica, ho visualizzato il blog e gli annunci AdSense hanno cambiato formato, ho reimpostato manualmente il formato originale ed è tornato tutto ok. Questo solo a titolo informativo per chi dovesse riscontrare lo stesso cambiamento, ma niente di grave, in 20 secondi si risistema tutto.

Grazie per la disponibilità e per la pazienza

Ciao

Astasia ha detto...

Ciao! Trovo le tue guide molto utili...ma nel mio template (femina di http://templatesparanovoblogger.blogspot.com/) non funziona ;_; ... Non mi dà errori mi ha messo le variabili e le visualizza ma nada de nada...
Hai qualche suggerimento da darmi per fare qualche ulteriori verifiche?
Grazie mille e buon anno!!!
Ciao
Astasia

Marco ha detto...

Anzitutto ti faccio i complimenti per l'utilissimo blog!
Però ho avuto un problema col codice per "cambiare lo sfondo dei commenti dell'autore" ovvero, ho eseguito alla lettera tutto ciò che hai suggerito (utilizzo un template minima) ma non è cambiato assolutamente nulla :(
Se avessi tempo di darmi una mano in merito a ciò ti prego di rispondere al post e fornirmi un indirizzo dove possa inviarti il mio html così se puoi ci dai un'occhiata che io non ne capisco molto!
Ti ringrazio

Marco ha detto...

Errata corrige, funziona tutto alla grande :D
grazie ancora!

ANhIMA ha detto...

ho provato tene, nel layout esce l opzione per il cambio di colore sfondo e bordo commento autore, ma non ottengo risultati in nessuna delle modalità di visualizzazione dei commenti. il mio template è uno di quelli standard di blogger, il tic-tac blue. Come mai??

Antonella ha detto...

Non trovo l'ultima riga di cui parli:/b: skin.....devo cercarlo esclusivamente nella prima parte del template(sotto variable definition ecc..)o nell'intero template?
E sotto variable definition incollo la nuova porzione e basta o devo sostituire come nel caso dei commenti?

Antonella ha detto...

Come non detto...l'ho trovata!!!
Apportato anche questa modifica ;o)
Grazie!!!

Anonimo ha detto...

Cao tenebrae: per invece impostare il colore dello sfondo e del bordo dei commenti dei lettori come si fa?

Anonimo ha detto...

è la stessa soluzione che ho usato io, però ho trovato un possibile problema.. cosa succede se posta qualcuno che scrive come nome proprio il nome dell'autore del post? :)

mi sono imbattuto nel tuo post proprio mentre cercavo 'testimonianze' e soluzioni al riguardo.. ciao

Tenebrae ha detto...

@nickel: ah beh, se uno è così fashion da usare il mio stesso nick, si merita la cornice eccome!

scherzi a parte, sai che non ci avevo pensato? così su due piedi non saprei proporre una soluzione

Anonimo ha detto...

così su due piedi io avevo pensato di controllare anche l'url.. in modo che se uno mette stesso nick e stesso url allora non può essere un errore ... oppure è un fan sfegatato :D

ps. il mio giovane blog per (s)fortuna non ha di questi problemi ehhe

Anonimo ha detto...

Ciao Tenebrae

Nel caso di un blog con molti amministratore o autori: si può impostare la personalizzazione del commento anche per gli altri amministratori che non ha creato direttamente il post, ma tuttavia ci commentano?

Tenebrae ha detto...

@weiji: non so risponderti al momento, devo approfondire... mi annoto la cosa, ma non prometto niente in tempi brevi :)

ANhIMA ha detto...

tene per la mia domanda niente soluzione???
vedi sopra.. grazie

Tenebrae ha detto...

@auto: ho dato un'occhiata nel sorgente del tuo blog, e non ho trovato le modifiche che descrivo in questo post, quindi non ho potuto controllare

perchè non provi a farle su un blog di prova, magari con il template minima? così capisci se sbagli tu qualcosa o è proprio un problema del tic-tac

Gaspare Messina ha detto...

ciao! ho inserito il tutto senza problemi eccetto che:
l'unico problema evidente e' che non funzionano + i permalink sulla data del commento...

Qualche suggerimento? Grazie 1000.

ANhIMA ha detto...

ok grazie tene..proverò.
Si adesso non le hai trovate perchè le eliminai a suo tempo, scusa se hai perso tempo per colpa mia. grazie alla prox

Tenebrae ha detto...

@gaspare: sembra un problema legato al tuo template, qui i permalink funzionano perfettamente... mi dispiace, ma non mi viene in mente nessuna soluzione al problema, bisognerebbe spulciare il codice del template per capire cosa non va

My Ricettarium ha detto...

Ciao Tenebrae ti scrivo perchè ho riscontrato un problema analogo ad "auto"! Nel template precedente che era "cake" nessun problema ed inserii come da tua spiegazione tutto perfettamente e funzionava! Ora ho cambiato il template ed inserendo tutto non funziona, mi da la voce per cambiare colore.. ma quando salvo non cambia nulla, anzi mi leva pure la cornice bianca che c'è intorno ad ogni commento degli utenti. Ovviamente ho fatto tutto in un blog di prova.. non capisco come mai questa cosa....Sigh!

Mammagiramondo. ha detto...

fatto. Sei sempre così chiaro. Quando seguo le tue spiegazioni sono sicura che funzioni sempre!! Grazie!

Fabri ha detto...

che vuol dire default="#FAFAF5" che hai scritto nell'HTLM da copiare??? :-o

Rorò ha detto...

Ho tentato e ritentato, seguendo pedissequamente le tue direttive, ma evidentemente non è proprio cosa per me, peccto dovrò tenermi quello che ho :-))
Grazie cmq.
Ros

Rorò ha detto...

Caro Tenebrae, ho riprovato ancora ed ora mi ha salvato il nuovo template, cosa che prima mi diceva in errore, adesso mi ritrovo nella colonna dei colori sia la voce : colore commento dell'autore, sia bordo per il commento dell'autore, ma andando poi a verificare il blog, non è cambiato niente.Approfitto dell'occasione per chiederti come si può aggiungere un riquadro ad ogni commento di un post.
Grazie 1000
Ros

Rorò ha detto...

Ehm...sono sempre io, e adesso vedo anche la foto del header quadrettata...sigh...chissà cosa ho combinato :-))
ciao Ros

Anonimo ha detto...

Ciao Tenebrae,
Come stai? Passo sempre di qui ma è un po' che non ti 'disturbo'! :D

Volevo dirti che anch'io, come qualcun altro ed ha ben scritto Vinnie, ho lo stesso "problema":

«Nel (Layout- Caratteri e colori) dopo aver apportato questa modifica è apparso come dici in guida la voce Sfondo del commento autore e Bordo del commento autore quindi scelgo i colori salvo e fin qui ok. Ho rilasciato un commento per fare la prova ma Sfondo e Bordo non vengono visualizzati ovvero i miei commenti sono rimasti identici a prima.

Ho provato anche altre combinazioni di colori ma niente.

Credi che posso risolvere questo problema o mi conviene rimettere il codice precedente a questa modifica?»


Ah, io utilizzo la nuova gestione dei commenti sotto il post...

Ti ringrazio in anticipo e buona domenica!

Ele :)

Sawmoke ha detto...

Ciao..ottima la guida però quando inserisco la stringa dopo
"/* Variable definitions
===================="
mi dà errore. Anche nel seguire un'altra tua guida avrei dovuto applicare delle modifiche sotto questo parametro, ma si presenta lo stesso errore:
"Non è stato possibile salvare il modello
Correggi l'errore qui sotto, quindi invia nuovamente il modello.
Dichiarazione variabile non valida nell'interfaccia della pagina: Non è stato possibile analizzare le variabili dell'aspetto in quanto non sono strutturate correttamente."

Pistilon ha detto...

provato anche io con il nuovo template di blogger e non funziona..stesso errore di sawmoke

°Glitter Magic° ha detto...

ciao..skusa ma io purtroppo non ho capito..perhè non sono molto pratica con tutti questi codici.per me sono geroglifici-.-
non ho capito quale parte sostituire..anche perchè se salvo il tutto mi esce un messaggio di errore,dice che mancano i codici di chiusura ecc ecc..e poi volev chiederti una cosa..ho lasciato un commento io stessa sul mio blog per vedere come si vede..ma non mi appare questo tuo riquadro dei commenti..esce solo la parola:1 commento..e solo se ci clicchi sopra puoi visualizzarlo..e la scritta è di colore grigio come lo sfondo insomma..non si capisce..il mio blog cmq è questo..se ti va e non è un disturbo per te magari dagli una controllata cosi tu capirai meglio e spero saprai aiutarmi..il blog è:http://glittermagik.blogspot.it
grazie

Unknown ha detto...

Salve,
da circa due mesi ho aperto un Blog (premetto che sono un neofita in materia) "Sensazione Natura" e facendo delle ricerche in internet ho fatto qualche correzione ad uno dei modelli che offre la piattaforma di Blogger. Da 2 settimane nell'accedere al mio blog appare un avviso di malware e dopo aver consultato (Webmaster) e chiesto una rivalutazione del mio blog, (webmaster) ha risposto che il mio Blog è pulito e non risultano (malware) però questo cartello continua ad apparire. Facendo una ricerca pare che il problema sia diffuso su Blogger....come posso fare per risolvere il tutto? Ringrazio anticipatamente e auguro Buone Feste a tutti, con la speranza di avere una risposta per poter risolvere questo problema (che non è da poco). Antonello di Sensazione Natura

Anonimo ha detto...
Questo commento è stato eliminato dall'autore.
Unknown ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

chenlina ha detto...

CHENLINA20160308
michael kors outlet
kobe 10
jordan retro 11
p90x
kate spade
christian louboutin shoes
cheap jordan shoes
polo outlet
sunglasses oakley
michael kors outlet online
swarovski crystal
adidas originals shoes
adidas wings
ralph lauren outlet
gucci belt
cheap toms
louis vuitton bags
toms wedges
ugg boots
toms shoes
air max 95
pandora outlet
canada goose jackets
cheap toms
air jordan femme
louis vuitton purses
lebron 13
ralph lauren
tory burch outlet online
ghd hair straighteners
ugg outlet online
jordan concords
canada goose
asics shoes
lebron james basketball shoes
louis vuitton purses
louis vuitton outlet
oakley sunglasses wholesale
mont blanc
cheap air jordans
AS

Unknown ha detto...

jordans shoes
cheap jordans
jordan releases
Jordan 11 Concord
Jordan Retro 8 Concord
Jordan 5 fire red
Air Jordan 4 Alternate 89
new jordans
jordan 11
new jordan shoes
jordans 2015
jordans 2015
coach outlet
coach outlet online
coach outlet online coach factory outlet
online outlet stores
coach store
coach outlets stores
coach outlet stores
coach sale

Unknown ha detto...

adidas nmd
michael kors outlet online
christian louboutin
louboutin shoes
gucci outlet
christian louboutin shoes
michael kors outlet clearance
polo ralph lauren outlet
cheap ray bans
nmd adidas
20161230caiyan


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.