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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifNglo9KmKJOENyAd7XyJIirezi4jfqdMNrxRAVbJ2GTV4fW83bUGRfrCZHpPlQ4PCg2WbkcYmtT4qT64IuJjE6pn8ylMXrAI3e0Vbqe3kZB9ZcEKnOR952_9PWboa1Ys9x8cboV9ZSA/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!

35 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!

Unknown ha detto...

Ci voleva :)

the Tramp ha detto...

Faccio una prova.

Alessandro Cremaschi 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

Alessandro Cremaschi 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... :(

Quor è 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.

Alessandro Cremaschi 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

SimoLoveMakeup ha detto...

:))

Sonia Monagheddu 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

Anonimo 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 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...)

ex-dani 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!!! :(

Pizzico di Sale 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

Spank 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.

Tiziana 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

My Ricettarium 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

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...

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


Prima di lasciare un commento, leggete qui

Posta un commento

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