Comment Author Photo

Friday, October 17, 2008

comment author

Blogger or Blogspot by default has no chance on displaying the commenter author photo if they leave comment as Anonymous or using other service like Wordpress/Open ID. If you (as blogger commenter) did not upload your pic at your profile, you cannot see your photos, Thats bad because as we know, comment author photo are more like an Avatar that represent your nickname.

This is pretty bad for blogger blogspot but not for WP user. However there is a tweak to make it happen, all you need is HTML basic knowledge only

How to make it happen?
Go to PurpleMoggy site and learn the way, i'm sure you'll know what i'm means. If you're having difficult, then read their comment or you can ask here, and see what i can do for you

1. Go to your Blogger Dashboard Layout, click on Edit HTML, check the "Expand widget templates" box and find these line

[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'>
[b:else/>
[data:comment.author/>
[/b:if>
[data:commentPostedByMsg/>
[/dt>
[dd class='comment-body'>
[b:if cond='data:comment.isDeleted'>
[span class='deleted-comment'>
[b:else/>
[p>[/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>

2. The lines in bold means the word you need to add, you can change float:right to float:left if you want the pic to be on the left instead of the right

3. Last thing we need to do is to find tags and add the following code above it

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

4. Once you're done, save it

Attention! To make the works, please replace [ with < style="font-weight: bold;">bold RED right after //

//[![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>