Show Comment Author Photos in Blogger

Follow the steps given below to display comment author photos.

Log in to Blogger. Go to Layout > EditHTML and click on Expand Widget Templates.

Add the code given below between <head> and </head> tag

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Find the portion of code given below

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<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>
<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>
</b:loop>
</dl>

Add <div class='commentphoto' style='float:right;'/> right after line 3 and <div style='clear:both;'/> after line 26 in the above code. You can change float:right to float:left if you want the pic to be on the left instead of the right.

If you want to change the width and height of the photo then you have to customize the lines given below in the external javascript file.

BloggerProfiles.imageWidth = 10;
BloggerProfiles.imageHeight = 20;

That's it. You're done. Leave your comments and URL of your blog :)

2009-05-06