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>
<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>
<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;
}
.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.
Like it? Share!
Subscribe
82 comments:
Post a CommentThanks Dante
I did it. It was quick. It was painless. It worked immediately. Many thanks.
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 :)
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 .
@Mia why is it not workin ? Let me try to help you...
I use disqus. It's simple.
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!
@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 :)
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/
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
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...)
Hey... Dante...
avatar in blogger is not related directly with gravatar.com. It is only related with blogger profile image.
@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?
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 ...
Don't worry man :) I can handle CSS!
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
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.
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 ....
I appreciate it :)
Soufiane, just updated the posts with your contribution, thanks for making this community even stronger!
awesome
Thanks to you Dante, I really appreciate it...
cool img next to comment
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...
@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...
And guys, just FYI, Cahaya Biru (see 3 comments above) deleted hist comment himself... after getting self embarassed.
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 ....
Yes, THat's too bad...
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/
Hi Peter,
How would you like to be ?
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
Thank you, this was very helpful for adding the avatars to my custom blogger template!
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!
@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.
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
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.
great :)
@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.
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 :)
@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
como não sei inglês, vou no bom e velho português mesmo :)
parabéns dante, sou seu fãn incodicional.
Blogger now as a standard for the turn of the theme to support avatar feature would encode.
Thank you both two LeBlogger and Dante.
I did it!
Thank you!
VERY GOOD !!!
Even I did it…thanks Dante:)
very nice dude.
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...
Já está habilitado sim! Não precisa modificar nada.
did it, it worked!
Checking my avatar now. Geeez yeah, this rocks, aren't I a cutie? I love myself....
how to get a blog free???
Dante
I can't Found dl id='comments-block' on my template (FreshCitrus)
hi, I've tried and failed. The image shows outside the border, could you please help me?
oh and 1 more thing, how could I make my comment have different color from my visitors like yours..?
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
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
Thank you.. for information
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!
Can't find this code:
a expr:name='data:comment.anchorName'
Thank you so much, your blog has saved my life a thousand times. You Rock!
And, It is working good.
Thanks (again)
it's not working in my blog, can u help me Dante?
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!!!
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
by the way dante the best template is your, in this blog. i really appreciate it so much.
Just checking if this works.
Yo YO
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!
Hi Dante blogger avatar gravatar.com ile doğrudan ilişkili değildir. Sadece blogger profil görüntüsü ile ilgilidir. thanks Dante
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
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
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
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.
wkkk
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.
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
Awesome simplicity!!!!
i'll try it...
thanks ;)
Nice tip !
Oi, eu não consigo achar nenhum dos códigos citados, por favor me ajude!!
Post a Comment
Grab the feed for followup comments!