2008-11-28

Adding Comment Authors


By default, Blogger includes a comment author's display photo next to every comment in a blog.

However, the comment author's photo isn't showing up in the new comment form and thus making the feature is no longer available! For today's tutorial, I'll show you step-by-step how to add comment authors next to their comments.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates Box. Copy and paste the code below before the closing b:skin tag

.commentphoto img {
margin: 2px;
}

Next, add the source code below between the b:skin tag and the closing head tag.
<script src='http://javascripthost.com/s1/bin/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://i74.servimg.com/u/f74/11/94/91/73/blank10.jpg';
BloggerProfiles.imageWidth = 40;
BloggerProfiles.imageHeight = 40;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>


Then, search for the following lines:-
<dt expr:class='&quot;comment-author &quot; data:comment.authorClass' expr:id='data:comment.anchorName'>

Place this code immediately right after it:-
<div class='commentphoto' style='float:left;'/>

Again, search for these lines:-
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>


And paste the following code right after the closing </dd> tag.
<div style='clear:both;'/>

That's it, save the changes. You can now view your comment author's photo provided he/she has set his/her profile to be shared.

5 comments:

Anonymous said...

ah xde xde.. den punyor cek tuhh! uhuhu!

Anonymous said...

the small 'like' thumbnail on the left of the photo is annoying, so just put the photo right side...

thanks for the info...

Is said...

@Budiarno, change it from left to right as you wish :)

anish said...

hey im applying a new blogskin for my blogger
totally a new layout
then i lost the comment section
its like,comments cant be made to my entries
where is it?
how to get it back?
helppppppp!!!!

Is said...

Hi Anis, the js file is no longer working. You need to change to http://onlinebiztutorials.googlepages.com/blogger_comment_photos.js

Let me know if you encounter any ongoing problems.

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L