Show Commentators Photo inside comments in Blogger

Spread it!

Share

Email This

This is just another and important hack in the Bloggers hacks directory.This hack helps you show the photo of the commentator embedded on the left side of the comment or below the commentator’s name.I have also performed this hack in my blog.Now whenever Blogger users comment in my blog with their Blogger Profile then their photo will be obviously shown in the left side of their comment just like below.

Isn’t it great?It has got many features like:It attracts more users to Comment on your blog,Makes your blog professional looking and the comments seem easy to manage.It is not so hard to perform this hack in your blog.For that you must follow the following tutorial.

First of all copy the following code and Paste it in your blog Just above </head> tag.

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

Now in Second step search for the following Block of code.

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

After you Find searching the whole block of code,select the Codes and replace it with the following block of codes.

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

After you replace the code Save your the Template and see the photos of your Commentators.Enjoy.

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Similar Posts

• Comment numbering in Blogger
• Show inline comment form below each of your blog posts
• Show top labels or labels having more posts at label widget
• Create auto expandable posts (or auto readmore) in blogger with image thumbnails
• Create auto Expandable Posts in Blogger with no image thumbnails

Article by Dinesh Dhakal

Dinesh has written 294 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.