Blogger bring us comment avatars! Awesome! (Updated)


Blogger just brought us one of the most wanted features on any kind of Blogging platform: Avatars on comments. From a long time ago I have been looking for a way to implement Gravatar or any other way to show avatars on Blogger comments, but never really found a way that was really customizable, so no sucess.

Now as one of the Blogger Birthday feature series, the Blogger team allow us to show profile pictures besides every comment, what increases the idea of "community" in your templates and give it a more "netwroking with users" feeling, at least for me.

Unfortunaltely that feature does not immediately work for users with highly modificated templates such as me and many people around, but don't worry, I have made this little tutorial on how to implement that on your blogs.

How to activate avatar on your blogger comments

Go to your blogger Dashboard > Layout > Edit HTML. I recommend you to save a copy of your template in order to do changes safely. To do that just click the "Download Full Template" link.

Now click "Expand Widget Templates", and look for the following lines on your code:

<dl id='comments-block'>

and REPLACE it for the following:

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

After doing that, look for this line:

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

and ADD the following code right AFTER it:

<b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>

Save it, and you are done.

How to replace the blank space for a 35x35 image (Update)

Note: I give credits to Soufiane from LeBlogger for this step.

First look for this line of code:

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

And REPLACE it for the following:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

</b:if>

And for last, add the following code just before the line ]]></b:skin> :

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

Save it, You're done.

Note: If this tutorial does not work, make sure you have enabled "Show profile images on comments?" on your Settings > Comments section.

82 comments:

Post a Comment
TeknoMobi

Thanks Dante

Lori E

I did it. It was quick. It was painless. It worked immediately. Many thanks.

Mia

it's not working on my template, snifle snifle , weep weep :((
but on one of my recent templates has this code already built in - however : prior to knowing this little tid-bit of news , I had already installed Disqus into my template . Thanks for the info though Dante :)

Mia

Hey Dante , btw: I have a question aside from this - can mootools be handled in the Blogger Platform ? someone had said no , is this true ? you can message me @ twitter .

Dante Araújo

@Mia why is it not workin ? Let me try to help you...

Mihai

I use disqus. It's simple.

Dea Carvalho

Nossa! Foi fácil!
Eu sempre quis isso no blogger. Enfim, depois de 10 anos estamos ganhando muitos presentes. Agora já tô ansiosa pelo que você vai poder fazer para melhorar os estilos!

Dante Araújo

@Mihai, Is Disqus completely CSS Customizable ?

@Dea, Talvez eu poste um tutorial exemplo de como editar as classes, mas isso quando eu tiver tempo de implementar no meu próprio blog :)

jerry

hi dante, i'm not spamming but 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

Hi,
To make this working for all templates you should add another line of code.

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

you should replace it with :
<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>

Soufiane
From LeBlogger.com

Soufiane

To replace the blank space for Anonyous comments with a 35x35 image, i added these lines of CSS (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...)

Rain

Hey... Dante...

avatar in blogger is not related directly with gravatar.com. It is only related with blogger profile image.

Dante Araújo

@Jerry, Great contribution!

@Soufiane, Thanks a lot for the tips! I am making a tutorial on how to customize the avatars, I will consider adding this on the tutorial, with credits to you, of course.

@Rain, I know, where did I say that it was related to gravatar?

Soufiane

Thanks a lot Dante, it's very nice.

I have some CSS codes to customise the Avatars (position, background, border ....) if you are interested i can send it ...

Dante Araújo

Don't worry man :) I can handle CSS!

Soufiane

Oh yes, of course you are a Big Boss in CSS.
Just look at this Template, it's amazing.....
Your work is really impressive ...
Bravo

Dante Araújo

Haha Of course not... I give my best when I do something... that's why I make a good work. If everyone do it, they will be as good as they can.

Soufiane

Your templates are very very good, I'm really glad I found your blog today.

I'll probably write a post about your blog in the coming days ....

Dante Araújo

I appreciate it :)

Dante Araújo

Soufiane, just updated the posts with your contribution, thanks for making this community even stronger!

Azroy Bin Azlan

awesome

Soufiane

Thanks to you Dante, I really appreciate it...

Vinay

cool img next to comment

Cahaya Biru
This comment has been removed by the author.
Dante Araújo

Oh my god, I did not say that this is was a way to implement gravatar on blogger.

Sincerely you guys NEED TO LEARN HOW TO READ!

There is a line where I say:

"Now as one of the Blogger Birthday feature series, the Blogger team allow us to show profile pictures besides every comment..."

Are you guys serious ? Please read better, It will keep us away from this kind of embarassing situations...

Dante Araújo

@Cahaya Biru, I am sorry for you. I just don't like this kind of action. You came here trying to embarass me, and you were the one embarassed at the end... My users trust me and they know I give my best to them, so don't come to MY BLOG trying to do that, because it just won't go wel...

Dante Araújo

And guys, just FYI, Cahaya Biru (see 3 comments above) deleted hist comment himself... after getting self embarassed.

Soufiane

Don't worry about people like that Dante, you are worth much more than that.

I think he wrote his comment a bit stupidly and did not have the courage to apologize ....

Dante Araújo

Yes, THat's too bad...

Peter

Hi! I came by your site quite by accident in an attempt to fix a minor problem I have on my site. The profile avatar is half way down the commentators name.

Please, could you suggest a fix? Thanking you for your time.

My site: http://stvincentsdarlinghurstmalenurses.blogspot.com/

Dante Araújo

Hi Peter,

How would you like to be ?

Cahaya Biru

Hi Dante,

Actually, you get misunderstood.

my purpose to delete my comment because I want to keep you stay away from embarass situation as you explain before.

I know that some of minor situation which critic appear could make miscarry and misunderstanding come up. Because of that, I delete my comment. So, Please, think positively...

I could write my comment back, If i want to.... And come here anytime I like...

I hope this explanation could make the situation clear.

Regards

Skebba

Thank you, this was very helpful for adding the avatars to my custom blogger template!

Peter

Hi! As the avatar is half way down the commentators name, I would like the avatar and the commentators name to be on the same line,(ie. on the same level as each other) if that's alright! Thank you!

Dante Araújo

@Cahaya Biru,

But you have to agree that you took the wrong position when you came here commenting with UPPERCASE trying to embarass me in front of my users. That's not a good thing man.

Cahaya Biru

Hey Dante, please, think positive again.
Uppercase mean strong emphasis, not trying to embarass.

All I know, before blogger get birthday, that feature is already istalled in blogger demo template.
Absolutely, with your provocative statement, bringing gravatar link, some reader could think this is for gravatar. But, obviously, it is not relating with it. So, sometimes, comments bring critics.

However, How manage our view and not to get emotional about it is very important thing. Get positive is a way bringing our view to next development and maturity.

Regards

Jeohacks

Hi Dante, may I know how to highlight Author Comment and customize the Comment Box like your blog? I tried a lot of trick from other blog but not working.. hope u can teach us about this tutorial and would be really appreciate it if you can find the solution is.

Anonymous

great :)

Dante Araújo

@Jeohacks, That would be a nice tutorial... but at the same time big and hard to make, But I will try to make it, the problem Is that I have almost no time.

@Cahaya Biru, Whatever.

Cahaya Biru

Hi Dante, now we know that All your assumption about me is absolutely not true.

Making provocation and justify other people are something ethical matters. For next, I hope that you are not getting too emotional when you face critical comments.

Also, I think that you need to learn more about patience, Be mature like a wiseman, and think positive. Because Critics, compliment, and suggestion are something always appear in this Comment Area.

Lastly, I will not continue this discussion again. And, Have a nice blogging....

Regards

Админ

cool :)

Dante Araújo

@Cahaya Biru,

Not really, You're wrong, I just commented "Whatever" because I have no reason to continue on this useless conversation with you.

Just FYI, about 3 people came to me talking about your comment, and they were the ones who encouraged me to reply to you like this, so you're wrong about me, I do not get any emotional when I get critics.

Specially because I have no reason to get emotional, as I got not critics at all, I mean, people just enjoy my work because I help them, just take 3 minutes to read my comments around and you'll see the amount of "critics" i get.

Whatever the reason was that you came here commenting like that, It did not offend me, but offended my users, and they came to me talking about it.

What I have replied to you were words from my users, I don't really care about it, but they do.

Best Regards,

Dante Araujo

Guilherme

como não sei inglês, vou no bom e velho português mesmo :)

parabéns dante, sou seu fãn incodicional.

TeknoMobi

Blogger now as a standard for the turn of the theme to support avatar feature would encode.

Thank you both two LeBlogger and Dante.

Iole

I did it!
Thank you!

Gilang

VERY GOOD !!!

universities in spain

Even I did it…thanks Dante:)

HANIF

very nice dude.

Anonymous

Ola, parabens pelo otimo trabalho, odoro seus templates e tutoriais.

Gostaria de pedir sua ajuda, o template BloggerTube ja esta habilitado com este recurso?

Pois eu baixei aqui e não esta aparecendo, fiz este tuto e continua não aparecendo.

Me desculpe pelo incomodo, eque gostaria muito de colocar esta função no meu blog.

Obg...

Dante Araújo

Já está habilitado sim! Não precisa modificar nada.

Amy

did it, it worked!

Megan Mills

Checking my avatar now. Geeez yeah, this rocks, aren't I a cutie? I love myself....

Lost Wireless Password

how to get a blog free???

مهدی

Dante
I can't Found dl id='comments-block' on my template (FreshCitrus)

khayla

hi, I've tried and failed. The image shows outside the border, could you please help me?

Khayla

oh and 1 more thing, how could I make my comment have different color from my visitors like yours..?

Khmer Spy

working good. But how do we move the name to under the avatar like your blog here?

http://kh-spy.blogspot.com/2009/11/statement-of-heng-peov.html

Nez

Hi, Dante! Can you help a little?..
I havу done all changes in html and all worked properly, but from some moment in comments my own avatar isn't showing... All others are show normally. my blog is no-knower-man.blogspot.com

oy'z

Thank you.. for information

Anup

If any buddy has problem of avatar's CSS. Please see this trick. It is good CSS coded and problem solve to all. Click through my name.

Thanks!

Robinhood Java

Can't find this code:
a expr:name='data:comment.anchorName'

VelvetMafer

Thank you so much, your blog has saved my life a thousand times. You Rock!

And, It is working good.

Thanks (again)

Anonymous

it's not working in my blog, can u help me Dante?

Ricky Luz

hi, I managed to follow all the steps given. all fine and working. Then I went a little further, i replaced the blank avatar with a personalized one. Great. then I wanted to make the avatars looks much bigger, such as 100x100, the problem is that everything works fine if it wast by the fact that the avatars are cut in half, somehow part of it is hidden in the left side...What should I do to give it more space to this new sized avatars? Thanks! Have a look if you can and let me know if you can help, please?

My test blog is: http://blog-sixdegrees.blogspot.com/2009/12/test.html#comments

Many thanks!!!

SK

I try in many Blog Templates But this line [a expr:name='data:comment.anchorName'] seems not exists or may be different. Can you suggest where i will have to place if not exist.

Blog Directory | Wallpapers Pub

Thanks

Walidplus

by the way dante the best template is your, in this blog. i really appreciate it so much.

przemekspider

Just checking if this works.

Anonymous

Yo YO

viagra online

I like this comment: "I havу done all changes in html and all worked properly, but from some moment in comments my own avatar isn't showing..." is very interesting!! thanks for sharing!

çiçek siparişi

Hi Dante blogger avatar gravatar.com ile doğrudan ilişkili değildir. Sadece blogger profil görüntüsü ile ilgilidir. thanks Dante

Anonymous

hi Dante Please help me, i like you templates and started bloging it. i just want my comment post look like this in your page/ with callouts design and and i want to change the background color of my comment box. please help thank you

Anonymous

Realmente não estou conseguindo... já instalei e desinstalei várias vezes o Pesquisa Personalizada da google e continua não respondendo para o blog.
Como posso resolver essa... Tem jeito?
Quando se tem muito material arquivada, a ferramenta de busca para o site é essencial...
Muito Grato,
Transmutando

heandri

VIAGRA is prescribed to treat erectile dysfunction (ED).
IMPORTANT SAFETY INFORMATION BELOW.
Do not take VIAGRA if you take nitrates, often prescribed for chest pain, as this may cause a sudden, unsafe drop in blood pressure.
Discuss your general health status with your doctor to ensure that you are healthy enough to engage in sexual activity. If you experience chest pain, nausea, or any other discomforts during sex, seek immediate medical help.

online aciphex

online aciphex

Casey

Is Erectile dysfunction due to stress or heredity, genetics? I guess its just too difficult to understand human body. I am hoping to dig the cause so we can target to cure the cause and not just the disease itself.

Anonymous

wkkk

Anonymous

Lowermyrtax.org

Lowermyrtax.org #1-rated, Free tax Tips and Information.Easily prepare your tax return and file income taxes online using free tools.

lowermytax, lowermytax.org, tax, taxes, tax software, free tax filing,tax preparation, online taxes, free tax software, tax returns, efile, free efile,e file, e-file, online tax filing, taxes online, income tax software, tax forms,tax deductions,online tax filing, taxes online, income tax software, tax forms,tax deductions.

toronto escorts

I havу done all changes in html and all worked properly, but from some moment in comments my own avatar isn't showing... All others are show normally. my blog is no-knower-man.blogspot.com

El Patron

Awesome simplicity!!!!

freeman

i'll try it...
thanks ;)

SUNIL KUMAR

Nice tip !

Anonymous

Oi, eu não consigo achar nenhum dos códigos citados, por favor me ajude!!

Post a Comment

Grab the feed for followup comments!