Poner foto comentaristas en blogger

Con esto ponemos la foto de los comentaristas de nuestras entradas.

En otras plataformas es bastante común encontrar plantillas con la foto de los comentaristas de nuestro blog, esa foto es la que se encuentra en el perfil de los lectores. Blogger no contempla esa posiblidad.
Vamos a hacer algunos cambios que nos permitirá tenerlo en Blogger.

1. Descargamos el archivo comment_photos.js y lo alojamos en nuestro servidor habitual.

2. Antes de </head> añadimos este script:

<script src='url_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage =
'url_imagen_sinfoto'
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
1);});
//]]></script>

En url_comment_photos.js ponemos la url donde hemos alojado el fichero . js anterior.
En url_imagen_sinfoto ponemos la url de la foto que hemos elegido para identificar los comentaristas que no tienen foto en su perfil de Blogger.
En BloggerProfiles.imageWidth = 60; ponemos la anchura de la foto.
En BloggerProfiles.imageHeight = 75; ponemos la altura de la foto.

3. Expandimos la plantilla y buscamos la parte siguiente e incorporamos las dos lineas resaltadas en amarillo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:left;'/>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

Y añadimos este css antes de ]]></b:skin>.

.commentphoto img {
margin: 2px;
}

Visto en Purple Moggy.