Blogger introduce la foto o avatar del profilo nei commenti del blog. Breve tutorial per inserirla anche nei modelli personalizzati.

Prima di passare a questa nuova feature introdotta da Blogger in occasione del suo decimo compleanno ci sono da fare alcune considerazioni

1. Nel popup o nella pagina dei commenti che si apre se non si sceglie l'opzione del modulo sotto il post, gli avatar dei profili erano già presenti
2. Questa funzionalità per il momento funziona automaticamente solo per i modelli ufficiali di Blogger e non con quelli personalizzati. Per questi ultimi occorre variare un pochetto il modello, cosa che illustrerò qui di seguito

L'annuncio è stato dato da Blogger Buzz qualche giorno fa ma ho aspettato a parlarne nella speranza che qualcuno riuscisse a introdurre questa feature anche per i modelli personalizzati. La mia speranza non è andata delusa visto che il blog francese Le Blogger è riuscito nell'intento.

Per prima cosa bisogna andare su Impostazioni > Commenti e scegliere di mostrare gli avatar dei profili come mostrato nel seguente screenshot

 

Salvare le Impostazioni cliccando a fondo pagina. Aprite un articolo in cui siano presenti commenti, se avete un modello personalizzato probabilmente non vedrete apparire nulla di nuovo

Adesso andate su Layout > Modifica HTML  e salvate il modello completo quindi cercate la seguente riga di codice

<dl id='comments-block'>

e rimpiazzatela con questa

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

come mostrato nel seguente screenshot. (Se invece che con dl la vostra riga inizia con div lasciate inalterato questo tag e rimpiazzate tutto il resto)

Adesso cercate questa nuova linea di codice

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

e immediatamente sopra incollateci quest'altro codice

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

dove i caratteri in rosso rappresentano la dimensione e il margine e possono essere personalizzati

Salvate il modello. Ecco come si presenteranno adesso i commenti del vostro blog anche se super-personalizzato

Forse 35 pixel per gli avatar sono pochi e penso che per alcuni modelli convenga aumentare questi valori.

Aggiornamento: per inserire un avatar anche nei commenti anonimi e in quelli con OpenID andate su Layout > Modifica HTML e cercate la riga

]]></b:skin>

quindi immediatamente sopra incollate il seguente codice

/* Avatar */
.avatar-image-container img {
background:url(URL_Immagine);
width:35px;
height:35px;
}

con al posto di URL_Immagine l'indirizzo dell'avatar. Per maggiori informazioni consultate l'articolo

• Inserire un avatar nei commenti anonimi e in quelli con OpenID -