Mostrar la imagen de los comentaristas en Blogger

La opción de que se muestren las imágenes de los comentaristas en Blogger ya se encuentra disponible hace algún tiempo, pero debido a que hay un montón de usuarios con diferentes diseños de plantillas en sus blogs, activar esta opción se ha vuelto algo complicada (sobretodo en una plantilla altamente modificada).

Este post es para explicar cómo activar la opción en nuestro blog y obtener un resultado como esto:

Primero lo primero

veamos si nuestra plantilla soporta esta opción por defecto, necesitamos activar una opción en las configuraciones de nuestro blog de Blogger.

Seleccionando nuestro blog nos dirigimos a Configuración > Comentarios y en la opción "Mostrar imágenes de perfil en los comentarios" seleccionamos que Sí.

Guardamos los cambios.

Vamos a un post de nuestro blog donde tengamos algunos comentarios, si vemos que en algunos de ellos ya se muestra una imagen al lado de cada comentario, pues quiere decir que esta opción ya funciona bien y no debes hacer ninguna otra modificación en tu blog ;)


Si por el contrario, activando esta opción aún no ves las imágenes del comentarista al lado de su respectivo comentario en cada post, hay que hacer un par de modificaciones en el código html de tu plantilla.

Explico los pasos a seguir:

En tu blog dirígete a Diseño > Edición de HTML

Primero realiza una copia de seguridad (nunca está de más) del diseño de tu blog actual, sólo haz click en el enlace "Descargar la plantilla completa" que te aparecerá en la parte superior de esa página.

Una vez hecho esto, en la sección "Editar Plantilla" marca la opción "expandir plantillas de artilugios".

Y aquí viene lo más importante, en el código de tu plantilla, encuentra la siguiente sección:


<dl id='comments-block'>


Reemplaza esa linea por la siguiente:

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


Ahora, encuentra la siguiente linea (por lo general se encuentra unas pocas lineas más abajo) :

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


Justo antes de esa línea agrega el siguiente código:

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


Y listo! guarda los cambios y verás que ahora tus comentarios cuentan con la imagen de perfil del comentarista.

Espero haber sido lo más entendible posible y que a más de uno le sirva :)

Dudas? Sugerencias?