Show Blogger Avatar On Comment Section - Blogger Comment Avatars


Valid until 31 January 2015 (unless noted)
How to enable blogger avatar profile on comment section? Now, like wordpress blog, blogger blogspot blogs are also able to show its user's avatar. Blogger development team informed that now we (blogger users) can show comment avatars in blogger blogspot platform. I think it is a good news for blogger users. This feature will allow users / commentators to show their avatars when they leave a comment on blogspot blogs. It is very easy to set up just need a little customization to make it works on your blog.

blogger comment avatar

Thanks to Amanda for willing to share this info. If you still confused how to customize your blog to make blogger comment avatars shows in your blog, lets follow to the steps below, I'll make it simple for you.

Blogger Comment Avatar For standard templates
It is more easy for users who use blogger standard templates to enable blogger comment avatar. Log in to your account, Go To Setting - Comments - Set "Show Profile Images On Comments" to "yes" - Click Save!

Blogger Comment Avatar For Custom Templates (Non Standard Templates)
This trick is originally developed by Le Blogger (in french language)
1. Go to layout - Edit HTML - click (tick) Expand Widget Templates (Backup your template first)

2. Find this code <dl id='comments-block'> or <div id='comments-block'> (depend on your template), Now change it with this code :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
3. Find this code <b:loop values='data:post.comments' var='comment'>

4. Now copy and paste this code precisely after <b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
5. Save your template!

To see whether your blogger comment avatar is work, now check your post, look at the comment section and test it by giving a comment using your blogger profile.

17 comments:

blogger templates said...

Hi All, there is A tutorial about customizing blogger avatar at AllBlogTools.com

Here is the link

http://www.allblogtools.com/tricks-and-hacks/how-to-add-and-customize-comment-avatars-to-blogger-templates/

Soufiane said...

Hi,
I am Soufiane from LeBlogger.com
Thanks a lot for your Link.

To replace the blank space for Anonyous or Name/URL comments with a 35x35 image, i added these lines of CSS code (for example, just before ]]></b:skin> ):


/* Avatar */
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/AvatarBlogger.png);
width:35px;
height:35px;
}

(This will resize the small favicon (from 16x16 to 35x35) displayed for OpenID, Wordpress, LiveJournal, Typepad, AIM, the OpenID...)

Beben Koben said...

i'll try it, but i have using the avatar from my yahoo account...apa bentrok nggak yah ??? ;)

mr9tails said...

@ blogger templates
Hi, I see your avatar hack is great, thanks for sharing

@ Soufiane
Well done Soufiane, great job. Thanks for your info, now comments from anonymous & name/url profile can show default blank avatars

Soufiane said...

Thanks a lot...

opung chikal said...

great kinda post.. :thumbsup: about that PM size banner.. :( huuuhhhuuu.. It's not allowed with nil PR on blog to put that banner :( geezz..

Marq | Brochure Printing said...

Cool!Thanks for sharing ;) and thanks for the link, blogger templates! :D

auLia said...

thanks for sharing..

cheexa said...

mohon maaf lahir bathin sekalian ngasih tahu ada award di tempat saya tuk kamu silahkan di ambil, terimakasih :)

Omagaz said...

thank for this post

Louden said...

Works like a charm. Thanks!

Soufiane said...

Hi Angga
Avatars have problems displaying since two weeks ago...
The bug is "outstanding" on the "Known issues" Blog

Angie's Recipes said...

Hi

It didn't work for me. I can tell the avatar is there, because when I moved the mouse there, the pointer showed, and I could click to visit the blog, but the pictures all didn't show up. Have you an idea what I could have done wrong?

My Test Blog

Angie's Recipes said...

Angga, thank you for the reply. :-)) I hope the blogger solve the problem soon.

Thanks again!

sam said...

anyany 1 can tell when i write html and want to post then why give errorr???

Anonymous said...

Nice hack.

Starsunflower Studio said...

Thanks so much for this tut. It had the correct "if statement" that I needed! Thank you oodles! :)

Post a Comment

Rules:
Comment must be in English, otherwise will be not listed.
Spam comment will be deleted, so don't waste your time for it.
Respect yourself, respect others.