25 September 2009

How to show avatar's on blogger comments?

Advertisements

Now you can also add avtars to user comments as you have seen in various social networking sites. Avtars are small pictures of users.

Visit here for full demo of this widget.


To add avtar follow these simple steps-

1. Go to Blogger > Settings >Comments and enable “Show profile images on comment”. If you are using third party template then you have to add some html codes.

2. Go to Blogger Layout >Edit HTML and backup your template. Expand the widget templates and look for following code present or not

'data:post.avatarIndentClass'

If it is not present then look for

<dl id='comments-block'>

And replace above code with following one

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

3. Now look for

<a expr:name='data:comment.anchorName'/>

It may present more than 1/2 times. So replace each of it with

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>


4. For Anonymous users with no profile pictures you can set a picture. Look for code

]]></b:skin>

And add following code just ABOVE of the above code.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600/anon.png);width:50px;height:50px;}


[anon.png]

Or you can use different code for following picture

http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;}
 




If you want bigger avtar pictures then add following code instead of above

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600-h/anon.png);width:50px;height:50px;}


Here you can also set height and width of avatar.

Happy Blogging.

Related Posts

Newer Post Older Post Home

29 comments

Reply
Ron
October 9, 2009 at 5:34 PM

wow thanks. works for me ^_^

Reply
AMER
November 12, 2009 at 8:36 AM

Gr8 Work ....Thanks

Reply
RV2x08
November 20, 2009 at 8:56 PM

well...it's only worked on my own avatar but the other dun hv any image display...=.=
wat's the problem???
http://www.gm-zone.co.cc/

Reply
drraman
November 21, 2009 at 12:16 AM

Comments by Anonymous users do not show pictures. To make them visible follow step 4.

Reply
RV2x08
November 24, 2009 at 3:07 AM

i've tried it before. the icon doesn't show!! =.=

Reply
RV2x08
November 24, 2009 at 11:19 AM

thx for visiting. as you can c. it's jz show our avatar. but the anonymous doesn't hv.

Reply
drraman
November 24, 2009 at 10:38 PM

can you find following url in your template

http://img1.blogblog.com/img/blank.gif

Reply
RV2x08
November 25, 2009 at 1:31 AM

i can't found it. is it any problem with that?

Reply
drraman
November 25, 2009 at 11:23 PM

yes. It is the image location that displayed for anonymous comments in your blog. Try expand widget template and find if it is there?

Reply
RV2x08
November 26, 2009 at 12:32 AM

I expanded the widget still can't find it. then,how to fix it?

Reply
drraman
November 26, 2009 at 1:03 AM

upload your template to rapidshare or other site then give link here. I will try it.

Reply
RV2x08
November 26, 2009 at 3:08 AM

Here's my template link:
http://www.mediafire.com/?zmmmjem0g5t

Thanks for helping me!

Reply
drraman
November 26, 2009 at 6:33 AM

I modified code for anno comments and also added new code for it. try them one by one.

Reply
RV2x08
November 27, 2009 at 2:07 AM

can u send me the template that u hv mod?

Reply
drraman
November 27, 2009 at 6:23 AM

i tried with your template but it not worked. I need original template. Can you tell me from where you downloaded it?

Reply
RV2x08
November 27, 2009 at 8:32 AM

here is the original template link.
http://www.mediafire.com/file/5otzycjdfl5/Zixpk Blue Template.rar

Reply
drraman
November 28, 2009 at 12:34 AM

you template is customized one and this feature only works with standard templates.

Reply
RV2x08
November 28, 2009 at 2:41 AM

any better solution if i wan to put the avatar?

Reply
drraman
November 28, 2009 at 11:14 PM

Currently only one - try a different template. First test it for this feature and then you can use it for your blog.

Reply
RV2x08
November 29, 2009 at 12:30 AM

....
nvm. i will try it. anyway thanks for your help. :)

Reply
Saimoom
June 4, 2010 at 12:31 AM

let me see. If it works I'll continue it.
Thank you.

Reply
Saimoom
August 10, 2010 at 3:37 AM

Thanks admin. I am using your tips. Its very nice tutorial. Could u tell me how to add custom domain?

http://saimoom.blogspot.com/
http://shinemark.blogspot.com/

Reply
drraman
August 11, 2010 at 2:04 AM

Hi Saimoom

Read

1. At last added a Custom Domain from GoDaddy.com to Blogger!!!

2. http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=55373

Reply
Nacho
March 14, 2011 at 11:01 AM

Hi!

My blog is http://yoyepunto.blogspot.com and I can't find any ANCHOR in my template. What can I do? Thanks in advance!

Reply
drraman
March 14, 2011 at 11:54 PM

@ Nacho
Did you followed all the steps and clicked on Expand the widget templates

Reply
puluth®
March 19, 2011 at 8:29 PM

hallo, my avatar, (author avatar) not showed . . please help me. . . :(

Reply
drraman
March 20, 2011 at 12:56 AM

# puluth®

Please follow the all steps and the codes carefully.

Reply
spiky_fox
October 3, 2011 at 11:25 PM

hello .. please am using mobipress theme ... i tried every thing and get nothing .... plz if you can download the theme and reply me how to add it .... i will be very thankful for you


http://fractalblognetwork.com/templates/mobipress_phone_blogger_%20template.zip

Reply
DrRaman
October 6, 2011 at 12:16 AM

Download Mobipress template from here:

http://www.blogger-help.com/2011/10/mobipress-3-column-blogger-template.html

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More