Mostrar avatares en los comentarios de blogger

Hace ya bastante tiempo y por motivo de su décimo cumpleaños, blogger introdujo una nueva característica: avatares en los comentarios. Esta novedosa funcionalidad muestra la imagen del perfil en blogger de cada lector que comenta en nuestro blog, lo que facilita la identificación de usuarios / administradores y hace más apetecible el comentar.

Muchos de vosotros me habéis comentado que, dependiendo de la plantilla, los avatares son visibles o no, aún configurándolos en el apartado de Configuración.

Por ello, he decidido explicar en esta entrada, la instalación a través del código de la plantilla, lo que hará posible el obtener los avatares a todo aquel que no los haya podido instalar.

El primer paso será el de asegurarnos que tenemos configurada la opción "¿Mostrar imágenes de perfil en los comentarios?"que encontraremos en el apartado Configuración>Comentarios.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

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

Si no la encuentras significa que en tu plantilla faltan los códigos necesarios por lo que tendrás que añadirlos.

Para ello busca <dl id='comments-block'> y reemplázalo con esto:

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

Seguidamente encuentra todas las líneas como esta (deberías encontrar más de una):

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

Y sustitúyelas por bloques como este:

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

Finalmente busca la etiqueta ]]></b:skin> y encima agrega el CSS que aplicará estilo a los avatares:

#comments-block.avatar-comment-indent dd {margin-left: 0;}
#comments-block .avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIw150dUPjAYQVpIBmPN5vRn1uyLZhQH9xTR7Jl3x8dVpWxitswBt6PJwjM3PXPsLUqMygWNuyV5fxlbUIpruCpXX9Kg-1-MnWRiRGAQSIYitIg7ctlZWCIYglkuf8-3TLNR-zhcaI1lM/s1600-r/blanonim.png); left: -40px; height: 36px; width: 36px; position: absolute;}
#comments-block .avatar-image-container img {border: 1px solid #dddddd; float: right;}
#comments-block.avatar-comment-indent {position: relative; margin-left: 40px;}
#comments-block .avatar-image-container.avatar-stock img {border: none; padding: 1px;}

La línea resaltada en color verde es la dirección de un icono para representar usuarios anónimos y que aparecerá cuando algún lector comente como anónimo o "Nombre / URL", pero puede reemplazarse por cualquier otra imagen.

Guarda la plantilla para terminar.