We have been moved to http://www.bloganol.com/

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.

comments

12 Responses to "Show Commentators Photo inside comments in Blogger"
Anonymous said...
October 18, 2008 at 12:08 PM

Nice hacks,..
once again,..THANKS.
Good Luck n SUCCESS!


P.K.ARUN said...
February 1, 2009 at 8:21 AM This comment has been removed by the author.

MR-BOLICA said...
March 15, 2009 at 4:48 PM

it show to me only the defult photos not the profile one

any help


Simran said...
April 3, 2009 at 8:25 PM

Its not working for me :(

http://technolizard.blogspot.com


CELEBSIMAGE said...
April 16, 2009 at 12:58 PM

i am not getting this and i too dont see in your blog.


Tania said...
May 1, 2009 at 5:16 PM

thanks for sharing. it work sell on me


Sameer Khan said...
May 21, 2009 at 5:46 PM

sorry it didnot worked..it only shows default photos for anonymous and unregistered users...but id doesnot show any picture for registered users...

Please HELP...

see here... http://hindimp3sdownload.blogspot.com/2008/04/jimmy-free-songs-download.html


Sameer Khan said...
May 21, 2009 at 5:50 PM

it didnot worked for me... please I need your help.. to make it work...


PANOS KOYKOYZELIS said...
May 24, 2009 at 5:24 AM

This works ONLY if the comments form is in a new popup window, NOT if it is an embeded form


gnesop said...
May 24, 2009 at 9:52 PM

not works to my blog too


Anonymous said...
June 19, 2009 at 2:41 PM

For now this script does not work - maybe Blogger changed some defaults...

But it works WITHOUT any scripts if you set open comments in a new popup window.


teddy said...
August 13, 2009 at 1:58 PM

Your JS file has bandwith problem. This means at some specific times, the trick doesn't work !


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!