Show Commenter Photos in Blogger

by Nandupatel on January 8, 2010

Blogger user have seen author photo in comment box of wordpress blog, and I think you definitely want to add also in blogger. Here is tricks for it.

Log in to blogger account. Go to layout >> Edit html and click on small box next to Expand Widget Templates.

Step:1 Now Find code </head> and paste below code just before </head>

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

Step: 2 Find below 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/>

Add this line <div class=’commentphoto’ style=’float:left;’/> after

<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>

You can change float:left to float right according to your choice.

Step 3: Find below code: You can find this code, if you follow above 7 line code.

<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 this line <div style=’clear:both;’/> after red code </dd>.

Regular image size is 75 x 75. If want to change than you have to upload external .js file on your server and change it. Here is line if you want to change.

BloggerProfiles.imageWidth = 75;
BloggerProfiles.imageHeight = 75;

For your purpose, I have uploaded some regular size.

For 100 x 100 use this link instead of http://www.thetricks.net/blogger/blogger_comment_photos.js

http://www.thetricks.net/blogger/blogger_comment_photos100.js

For 125 x 125 use this link

http://www.thetricks.net/blogger/blogger_comment_photos125.js

I hope this will work for you.

Credit: Singpolyma

Leave a Comment

Previous post:

Next post: