Tu foto o avatar en los comentarios

Gracias a este truco que nos brinda PurpleMoggy´s Blog podremos visualizar nuestras fotos o avatares de Blogger junto a los comentarios que dejemos en las entradas.
Para lograrlo tendremos que efectuar un par de pasos en la plantilla, pero nada demasiado complejo.

Una vez hecha una copia de seguridad de nuestra plantilla, nos moveremos por el editor HTML con los widgets expandidos y buscamos la sección de comentarios de nuestro blog:

<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:right;'/>
<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>

Las líneas resaltadas en Rojo son las que tendremos que añadir a nuestra plantilla exactamente en las posiciones en las que veis arriba. Después de asegurarnos haber añadido correctamente este par de líneas, subiremos por nuestra plantilla hasta la etiqueta de cierre </HEAD> y justo encima añadimos estas líneas:

<script src='http://jscripts.ning.com/get.php?
xn_auth=no&id=830605' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos
('commentphoto','comment-author', 1);});
//]]>
</script>


Listo, ahora ya podremos ver nuestras imágenes asociadas a nuestra cuenta Blogger a la derecha de los comentarios.

Actualizacion: Al cambiar ciertas partes del código para poder mostrarlo en un post he cometido algún error. Las lineas que hay que cambiar son estas, pero nolas he borrado arriba para no cometer el mismo error y de paso dejarlas en sus posiciones para que sirvan de referencia para encontrarlas en la plantillas.

Primera linea a cambiar:
<div class='commentphoto' style='float:right;'/>

Última linea a cambiar:
<div style='clear:both;'/>