I can see you! Faces of your Commenter's can now be seen

Okay, just ignore my Title i am not really great of making a capturing title but just in case you read this post because of the title then i can say that i got lucky haha...

With my previous post i showed you how to customize your comment system and who say's that it's only wordpress can have fancy comment system? With the help of some very talented programmers, bloggers and hackers(Not the bad hackers i am talking here but those who play with codes and hacks) all of this makes possible. Now you can see your commenters avatar, how? i will explain them shortly.

I got a comment from Gem say's

"I was also trying to see whether it is possible to use profiles instead of MyBloglog hack. As you see, those who left comments above do not have their own MyBloglog accounts.

I guess no one figured that out. I've been using Google for that hack, by the way."

Answer to that is it is possible and already been used by few bloggers. Scripted by Singpolyma based by the work of Johan Sundstrom Updated by PurpleMoggy Updated and Promoted by http://www.bloganol.com i don't have any contribution but to spread it :)

Here's how to do it:
Go to your Dashboard - Layout - Edit HTML (Important! Save your template)
Hit Ctrl+F type </head>
Above that code place this Script

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

... Then Save.

Next is to tick the Expand Widget Template and look for this code Ctrl+F type dl id='comments-block

Here's what it all look like...

<dl id="comments-block">
<b:loop values="data:post.comments" var="comment">
<dt class="comment-author" id=""comment-" + data:comment.id">
<a name=""comment-" + data:comment.id">
<b:if cond="data:comment.authorUrl">
</b:if></a><a href="data:comment.authorUrl" rel="nofollow"><data:comment.author></data:comment.author></a>
<b:else>
<data:comment.author>
</data:comment.author>
<data:commentpostedbymsg>

</data:commentpostedbymsg></b:else></dt><dd class="comment-body">
<b:if cond="data:comment.isDeleted">
<span class="deleted-comment"><data:comment.body></data:comment.body></span>
<b:else>
<p><data:comment.body></data:comment.body></p>
</b:else>

</b:if></dd><dd class="comment-footer">
<span class="comment-timestamp">
<a href="http://www.blogger.com/%22#comment-%22%20+%20data:comment.id" title="comment permalink">
<data:comment.timestamp>
</data:comment.timestamp></a>
<b:include data="comment" name="commentDeleteIcon">
</b:include></span>
</dd>
</b:loop>
</dl>

Select the whole block of code and then replace them with this code 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'>
<div class='commentphoto' style='float:left;margin:5px;'/>
<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>

Then Preview -- If no red marks shows you have no problem then save. Check your comments and now shows the profile images of your commenters.

Credit

Credit have already placed above as part of my post. Post Source: Bloganol.com