Cómo mostrar la foto del autor del comentario en la página principal de Blogger

 

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios, buscar lo siguiente:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

2. Agregar lo siguiente (lo que está con color azul) después de:
<b:loop values='data:post.comments' var='comment'>

<div style="clear:both">

<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>

</dt>

<b:if cond='data:comment.authorUrl'>

<script type="text/javascript">

if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});

</script>

<b:else/>

<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});

</script>

</b:if>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

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

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<p></p>

</dd>

<b:else/>

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

</b:if>

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

</b:loop>

</dl>

Explicación:
<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>
- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).
- En margin, ver aquí.

3. Pegar lo siguiente antes de: </body> (esto se encuentra al final de la plantilla)

<script type='text/javascript'>

//<![CDATA[

function commentPhotoDo() {

var tag;

for(var i = 0; i < commentPhotoIds.length; i++) {

tag = document.createElement('script');

tag.type = 'text/javascript';

tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');

document.body.appendChild(tag);

}//end for var i in commentPhotoIds

}//end function commentPhotoDo

if(typeof(commentPhotoIds) != "undefined") commentPhotoDo();

//]]>

</script>

* Agregar tu propia imagen en donde dice: &defaultimage='+encodeURIComponent('http://aquí-la-dirección-de-tú-imagen'), porque algunos no agregan su foto y aparecerá una imagen como un anónimo(?), pero si están registrados en Blogger (con-enlace).
En el caso del anónimo aparecerá simplemente la imagen que ustedes han puesto.
- Con respecto a la imagen tiene que ser de ancho 60px por 45px de alto aproximadamente.
** px.- pixeles

4. Finalmente, guardamos los cambios.