Gli avatar dei profili nei commenti su Blogger!


E’ stata introdotta qualche giorno fa la possibilità su Blogger di visualizzare l’avatar dei profili nei vari commenti a fine post. Questa novità si rivela utilissima per riconoscere subito l’autore di un commento ma soprattutto dà una maggior sensazione di partecipazione “umana”, senza contare il notevole effetto grafico:

image

In certi casi, può essere un’alternativa migliore alla personalizzazione dei commenti dell’autore del blog, che ho tante volte rimandato di fare da quando ho cambiato template. Se in passato avete perso tempo a cercare la mia risposta tra i commenti, adesso basterà individuare l’avatar che uso da sempre, cioè l’occhio:

image

Vediamo come si applica ai template predefiniti e a quelli personalizzati.

Attivare la visualizzazione dell’avatar nei template predefiniti

Nei template predefiniti quest’opzione dovrebbe essersi attivata automaticamente, ma se non fosse così potete farlo da Impostazioni->Commenti:

image

Se avete attivato l’opzione o l’avete trovata già attivata, e nei commenti non appaiono l’avatar, allora state utilizzando un template non predefinito e dovrete mettere mano al codice HTML del template

Attivare la visualizzazione dell’avatar nei template personalizzati

La difficoltà di questa modifica dipende tutto dal vostro template, purtroppo il posizionamento corretto dell’avatar può risultare difficile da ottenere (come nel mio caso). Per questo consiglio di fare prima l’esperimento in un blog di prova e di fare il backup del template per poter tornare indietro se le cose vanno male.

1. Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

<dl id='comments-block'>

Questa riga potrebbe essere leggermente diversa in alcuni template personalizzati, in questo caso cercate la porzione che racchiude id='comments-block'.

2. Se avete trovato la riga, sostituitela con questo:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Se nel passo precedente non avete trovato la riga ma la porzione che racchiude id='comments-block', allora incollate:

expr:class='data:post.avatarIndentClass'

prima di:

id='comments-block'

A questo punto, l’area riservata ai commenti risulterà leggermente spostata per far spazio agli avatar. Potete fare anche varie prove saltando questo passo, per vedere se l’effetto finale vi piacerà di più.

3. Cercate questa riga di codice:

<a expr:name='data:comment.anchorName'/>

Se non la trovate, provate a cercare questa porzione di codice:

<a expr:name='&quot;comment-&quot; + data:comment.id'/>

Se non trovate neanche questa, cercate la riga che comincia con:

<b:loop ……

E che si deve trovare subito sotto la riga di codice che avete trovato nel passo 1.

4. Se avete trovato la prima riga di codice del punto 3, cancellatela e sostituitela con questo:

<b:if cond='data:comment.favicon'>
  <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
  <data:comment.authorAvatarImage/>
</b:if>

Se non avete trovato la prima riga ma la seconda, allora incollate il codice subito sopra. Se avete trovato la terza riga, incollate il codice subito sotto.

5. Salvate il template e provate a vedere l’effetto che fa.

6. (nuovo) Questo passo è opzionale e può essere provato da chi dopo le modifiche non vede gli avatar vicino ai commenti. Nel codice template, cercate questa riga di codice:

]]></b:skin>

Subito sopra incollate questo:

.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; } 

.avatar-image-container img { border:none;}


Caricare un’immagine per il proprio profilo



Se non avete scelto un’immagine per il vostro profilo, potrete farlo quando lasciate un commento visualizzando l’anteprima e scegliendo l'avatar da usare:



image



Se non avete un avatar nel vostro profilo, verrà semplicemente visualizzato il logo di Blogger.



Scegliere una posizione diversa per l’avatar nei commenti



I più tecnici potranno utilizzare codice CSS da inserire dentro la sezione <b:skin> del template per personalizzare l’aspetto e la posizione dell’avatar usando queste due classi:



.avatar-image-container: l’area che ospita l’immagine dell’avatar



.avatar-image-container img: l’aspetto dell’immagine stessa



Appena avrò un po’ più di tempo mi dedicherò io stesso a personalizzarne l’aspetto (mi piacerebbe visibile in alto a destra), e magari dedicherò un post di approfondimento all’argomento.



La maggior parte delle informazioni di questo articolo sono state tratte da Blogger Buster. Il nuovo punto 6 delle istruzioni è stato prelevato da qui.

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!

43 commenti:

Recenso ha detto...

ciao Tenebrae, io sto usando Arthemia (3 col) ma gli avatar li vedo già anche se mi risulta un template non predefinito. E' normale?

Tenebrae ha detto...

@recenso: mi riferisco ai commenti sotto al post, nella visualizzazione dei commenti a pagina intera o a finestra popup sono già visibili gli avatar

costanza ha detto...

mi trovi in accordo, quando parli di partecipazione umana. in effetti è stata una sorpresa visualizzare per la prima volta i commenti, accompagnati dall'avatar. facilita senza dubbio la lettura ed è più gradevole all'occhio.

:: Anemone :: ha detto...

Grazie mille Tenebrae!
Fatto in un secondo!
Sei sempre una fucina di idee!

Albania ha detto...

Ci voleva :)

the Tramp ha detto...

Faccio una prova.

Alex78 ha detto...

ciao Tenebrae, io sto usando come Blogger Template Style, Minima Black.
Ho seguito il tuo passo-passo ed ho incollato la porzione di codice prima della riga

a expr:name='"comment-" + data:comment.id'

ma non vedo né l'avatar né lo spazio che dovrebbe contenerlo.
Hai un suggerimento in merito?
Grazie

Tenebrae ha detto...

@alex78: ho dato un'occhiata all'html del tuo blog e in effetti l'immagine c'è, ma non si vede... probabilmente il problema è dovuto alla struttura del template che nasconde l'avatar sotto qualche altro elemento grafico

come ho scritto nel post, appena avrò tempo proverò a fare esperimenti per posizionare diversamente l'avatar e ne pubblicherò un articolo

Alex78 ha detto...

@Tenebrae: grazie mille della tempestiva risposta!
Complimenti per il blog! Ciao

Den ha detto...

Anche nel mio blog sfortunatamente l'effetto non si visualizza... :(

lamagagiò ha detto...

Ciao Tenebrae, ho bisogno del tuo miracoloso aiuto. Ho deciso di riprendere a scrivere sul blog ma, nel momento in cui cerco di pubblicare il post mivien fuori la scritta "ERRORE L'URL CONTIENE CARATTERI NON AMMESSI". Che devo fare? Baci.

Alex78 ha detto...

Ciao Tenebrae, ciao a tutti. Io ho risolto seguendo questo passo-passo http://bloggerperinulli.blogspot.com/2009/09/visualizzare-avatar-nei-commenti.html

caty ha detto...

Grazie per la pazienza e la chiarezza!

Tenebrae ha detto...

@alex78: grazie alex, nel post che mi hai segnalato c'è una porzione di codice CSS in più che risolve il problema.

ho aggiornato il post, invito anche gli altri a farmi presente se ci sono ancora problemi.

mary47 ha detto...

Ok operazione riuscita!
Grazie Ten non finirò mai di ringraziarti per quanto fai per noi!
Buona serata a te e Mafalda

Samantha.96 ha detto...

:))

SUNFLOWERS8 ha detto...

Ciao Ten grazie per l'ottima spiegazione ma purtroppo a me gli avatar non si vedono :(( ho provato 5 volte, mi arrendo. Aspetto tue notizie

klick ha detto...

Ciao.
Ho notato che anche nel tuo blog, il form che si apre per inserire l'immagine, è spezzato a metà.
Inoltre non si carica l'avatar.

Qualche idea?

Soufiane LeBlogger ha detto...

To replace the blank space for Anonyous comments with a 35x35 image, i added these lines of CSS (for example, just before ]]></b:skin> ):


/* Avatar */
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/LeBlogger.jpg);
width:35px;
height:35px;
}


(This will resize the small favicon (from 16x16 to 35x35) displayed for OpenID, Wordpress, LiveJournal, Typepad, AIM, the OpenID...)

Daniela ha detto...

Io quelle righe che dici tu non le ho proprio!
La mia sezione dei commenti è la seguente:
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 0em 1.2em 1em 1.2em;
color: $textColor;
padding: 0em 1em 0em 1em;
font: normal 100% Verdana, Arial, Sans-serif;
}

#comments h4 strong {
font-size: 90%;
margin: 0em 1.2em 0 1.2em;
padding: 0 0 0 1em;
text-align: justify;
}

#comments-block {
margin: 25px 15px 10px 15px;
line-height: 1.3em;
padding: 0px 1em 1em 1em;
border-top: 1px solid $BorderColor;
border-bottom: 1px solid $BorderColor;
color: $textColor;
text-align: justify;
}

#comments-block dt {
margin: 10px 10px 10px 10px;
padding: 50px 5px 0px 5px;
text-align: justify;
background-color: $textColor;
}

#comments-block dd {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
}

#comments-block dd.comment-footer {
margin: 0em 0 0em 0px;
line-height: 1em;
font-size: 68%;
padding: 0em 0 0 1em;
}

#comments-block dd p {
margin: 0 0 0em 0px;
padding: 0em 0em 0em 0px;
text-align:justify;
}

.deleted-comment {
margin: 5px 0 5px 0px;
font-style:italic;
color:$linkColor;
padding: 0 0 0em 1em;
}

.feed-links {
clear: both;
line-height: 1em;
padding: 1em;
color:$linkColor;
}

#blog-pager-newer-link {
float: $startSide;
padding: 1em;
font: normal 85% Verdana, Arial, Sans-serif;
}

#blog-pager-older-link {
float: $endSide;
padding: 1em;
font: normal 85% Verdana, Arial, Sans-serif;
}

#blog-pager {
text-align: center;
padding: 1em;
font: normal 85% Verdana, Arial, Sans-serif;
}

a.linkpost:link, a.linkpostvisited:visited { color: $linkColor; text-decoration: none; }
a.linkposthover:hover { color: $linkhoverColor; }

...quindi, niente da fare^^^

P.S. il template del mio blog http://altrodoveblog.blogspot.com/ è derivato dal Denim di blogger.

Sarachan ha detto...

Ciao e grazie per la spiegazione dettagliata. Come mai l'avatar appare solo per i primi 5 commenti?

@Daniela: le righe postate da Soufiane LeBlogger non le trovi proprio perchè vanno aggiunte al template :p

LizzyMoon ha detto...

ciao Ten,
oltre ai problemini che ti ho descritto nella mail, neanch'io riesco a visualizzare gli avatar..eppure lo spazio c'è....consigli?
grazie di tutto

LizzyMoon ha detto...

eh già... mi unisco a Sarachan... se gli avatar si vedono solo per i primi 5 commenti, tanto vale...e lasciamo tutto così e ci risparmiamo qst faticaccia!!! :(

Meb ha detto...

Ciao...il tuo sito è stupendo e molto utile...normalmente riesco a far funzionare tutto...tranne questa volta :((
Hai altri suggerimenti se dopo questi passaggi ancora non funziona nulla?

Di fianco al nome dei commenti mi è comparso il puntino dell'elenco puntato...non gli avatar!!!

Grazie per ogni possibile aiuto
Meb

FedeSpank ha detto...

Infatti... si vedono solo i primi avatar....:((
Soluzioni? :)]

Nurix ha detto...

Ciao, ti segnalo una mia stranezza... l'ho provato sul mio blog per pasticciare http://nurix-pdb.blogspot.com ed ho notato che la modifica non è retroattiva. Se pubblico un nuovo commento si vede l'avatar, altrimenti anche se il commento è di un utente registrato si vede solo la faccia da anonimo.

tyziana ha detto...

Ciao!
Senti, io nel mio blog, che condivido con altri sei amici, ho invece il problema di dover mettere un avatar non per i commenti ma per chi edita un nuovo post.
Chi ci legge nel mondo ( America, canada, Francia, etc. ) non riesce a capire che il blog non è solo mio, ma ci scriviamo in tanti.
Hai una soluzione? Grazie per un'eventuale risposta.
Ciao
Tiziana

Claudia ha detto...

Io ho provato tutte le varie modifiche.. ma niente!!!! :-(

maetta ha detto...
Questo commento è stato eliminato dall'autore.
maetta ha detto...
Questo commento è stato eliminato dall'autore.
maetta ha detto...

Ciao, scusa se ti disturbo!
ho provato a fare la modifica per inserire gli avatar, i blocchi dei commenti si sono spostati, ma non vedo le faccine.
Volevo inserire l'ulteriore modifica di cui hai scritto, ma non trovo questa riga

] ] > < / b : skin >

mi potresti dire più o meno dove la posso trovare?
grazie mille

Fattore Zero ha detto...

ciao Ten,
ho postato una soluzione "veloce" qui:
http://www.fattorezero.com/p/segnalazioni.html

方松腾 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

林剑伟 ha detto...

cheap oakley sunglasses
fitflop shoes
cheap air jordan
huaraches sale
michael kors outlet
ray ban outlet
fitflops
toms outlet store
michael kors outlet online
nfl jerseys
air huarache shoes
michael kors outlet
http://www.fitflopsoutlet.uk
kobe sneakers
cheap uggs
true religion
michael kors handbags outlet
christian louboutin outlet
michael kors factory outlet
http://www.cheap--jordans.us.com
http://www.cheap-airjordans.us.com
tiffany and co outlet
michael kors outlet
air huarache shoes
Cheap Jordans For Sale
toms outlet store
chrome hearts online
oakley sunglasses
fitflops clearance
chrome hearts online
cheap oakley sunglasses store
michael kors outlet store online
cheap tiffanys
louis vuitton handbags
cheap jerseys from china

Qing Cai ha detto...

mont blanc outlet
true religion outlet
ray ban sunglasses
air max 90
ray ban sunglasses
cheap jordans
cheap mlb jerseys
ferragamo shoes
beats by dre
omega watches
true religion jeans
cheap ray ban sunglasses
pandora outlet
swarovski crystal
nike air force 1
michael kors uk
swarovski crystal
true religion outlet
rolex watches outlet
jordan shoes 2015
coach outlet
ralph lauren,polo ralph lauren,ralph lauren outlet,ralph lauren italia,ralph lauren sito ufficiale
asics
michael kors outlet
fitflops sale
adidas shoes
coach outlet store
polo ralph lauren
rolex watches
swarovski crystal
cai20160512

Chenzhen 20160303chenzhen ha detto...

adidas shoes
louis vuitton handbags
michael kors outlet
jordan shoes
coach factory outlet
ray bans
yeezy boost 350 white
louboutin shoes
birkenstocks
tiffany uk
reebok classic
michael kors canada
cartier
ralph lauren pas cher
ray ban sunglasses outlet
true religion jeans
pandora jewelry outlet
coach outlet online
air max 90 white
pandora charms
ray ban outlet
cheap jordan shoes
ray ban sunglass,ray ban sunglasses,ray ban outlet,cheap ray bans,cheap ray ban sunglasses,cheap ray bans,ray bans
north face uk
hermes belt
micahel kors
kate spade handbags
versace sunglasses
coach factory outlet
louis vuitton borse
ferragamo
cheap nfl jerseys
adidas nmd uk
louis vuitton handbags
rolex daytona
cheap ray ban sunglasses
converse outlet
adidas superstar white
chenzhen20160601

chenlina ha detto...

ralph lauren polo outlet
kevin durant shoes
ralph lauren uk
toms outlet
louis vuitton outlet
adidas originals shoes
louis vuitton handbags
uggs for men
toms shoes sale
adidas yeezy 350
christian louboutin sale
true religion shorts
rolex submariner watches
louis vuitton handbags
coach factory outlet
ray ban sunglasses uk
the north face jackets
coach outlet
canada goose jackets
north face outlet
jordan 11s
toms shoes
asics outlet
burberry handbags
vans shoes outlet
michael kors handbags
canada goose
toms outlet
tommy hilfiger outlet
coach outlet store online clearances
louis vuitton uk
louis vuitton handbags
boston celtics jerseys
nike air max
michael kors outlet
oakley vault
adidas trainers
air jordan 13
longchamp handbags
louis vuitton handbags
chenlina20160823

chenmeinv0 ha detto...

cheap jordan shoes
montblanc pens
adidas nmd runner
adidas yeezy 350
moncler coats
true religion outlet
louis vuitton purses
louis vuitton purses
patriots jerseys
michael kors outlet online
2016.11.10xukaimin

Unknown ha detto...

air force 1 shoes We
san antonio spurs linky
golden state warriors jerseys with
cheap michael kors handbags little
yeezy boost 350 black would
skechers shoes cute!
los angeles lakers jerseys identifying
bengals jersey today!
michael kors uk products
mont blanc pens outlet around

Meiqing Xu ha detto...

adidas outlet
nike cortez
ugg australia boots
oakley vault sunglasses
michael kors outlet
ugg boots canada
rolex watches
birkenstocks
nike store
moncler outlet
20161230caiyan

chenmeinv0 ha detto...

canada goose outlet
chicago bulls jerseys
jordan 8
oakley sunglasses
coach outlet
ugg boots
ray ban sunglasses
coach factory outlet
ray ban sunglasses
chaussures louboutin
20173.4chenjinyan

raybanoutlet001 ha detto...

air max 90
jimmy choo shoes
nike huarache
pandora jewelry
ed hardy outlet
michael kors handbags
gucci sale
michael kors handbags
dolphins jerseys
oakland raiders jerseys


Prima di lasciare un commento, leggete qui

Posta un commento