Home » Blogger Tutorials, Tricks and Hacks » Blogger Comments Tricks » How To Add Avatars To Custom Blogger Templates

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add Avatars To Custom Blogger Templates

How To Add Avatars To Custom Blogger Templates

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

9,830 views

hi all, in my previous post :
Show Your Face, Display your Avatar / photo On Blogger Comments
I said that i’ll add a tutorial soon about adding avatar to your blogspot template if it’s not support or display it.

your template is acting like that because it’s a customized template, and to add the avatar to your comments you have to follow the steps in this tutorial, don’t worry it’s too easy.
Only two steps

Step 1

Log in to your blogger account and go to,
dashboard >> Layout >> Edit html
then make sure to check “Expand widget templates” box
And find the following code,

<dl id='comments-block'>

Now instead of this code past the next code.

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

Note : depending on your template you may find the above code with div Instead of dl

if you found it in your template with div

then you should replace it with a div too. so you’ll add the next code.

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

Step 2

Now find this code.

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

and exactly before it add the next code.

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

and exactly before it add the next code.

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

now you are done.
Finally click Save Template
And now you are done, soon we’ll add some tutorials about customizing your avatar,
all comments are welcomed.

Liked It ? Please Share

Comments

22 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Dante Araujo says:

    Good tutorial, I think you should make a live demo so people can check out the result!

  2. Max says:

    Hi Dante Araujo.
    thanks for commenting here, i think there is no need for a demo blog. any one must know what is the avatar.

  3. BEBEN says:

    This hack my template when in trouble, because many words that do not make the same code

  4. Dak Wan says:

    I have tried the instuction exactly to a T, but to no avail. Please take a look at my website http://sue-sygckit.blogspot.com .Really appreciated your help. Tqs k?

    • Max says:

      i can’t help you by visiting your blog, i can see that you are using a custom blogger template, you may try to find similar codes, or you can send me your template and i’ll try to help you.

  5. Ankit says:

    please tell me how can i add comment widget box
    below my blog post

  6. beben says:

    I have some of the same code with a code that designated in my template a expr:name=’data:comment.anchorName <— this is Max…

  7. Kristy says:

    I really love your comment boxes. I can’t seem to figure out how to do what you did. I am not interested in the “Add a comment” just everything above it. Any hints?

  8. Max says:

    It doesn’t work in my blog

  9. Nunya says:

    LOL, Everyone that keeps asking about the comment box… :)

    Folks this is a WordPress blog/theme!

    It’s not a blogger template!

    Max, your misleading your visitors, by posting blogger hacks on a WordPress site.

  10. Max says:

    hi Nunya, thanks for your comment, but i’m not misleading or any thing like that, i’m not using this site for blogging, so i don’t use blogger, i’m using this site for posting tutorials, and if i would make a personal blog i would make it in blogger, but this site is not look like a personal blog for me.

  11. designer says:

    this doesn’t work for blogger and why would I replace a code with the same code? Do you know the difference between before and after?No clear english me no understand…

  12. sunl says:

    Its not work in all templates. Some old or Pre Customized templates have not all these lines to replace.

  13. Tina says:

    This works great for me but when I tried to change the size from 35px to something larger, nothing happens and it just stays the same…

  14. Frankie John says:

    Dear Admin, I have tried the instuction exactly to a Templetes, but to no avail. Please take a look at my blog http://frankiejohn.blogspot.com/ .Really appreciated your help. Thanks :)

  15. Hi there. I tried to add the comment box like this one into my blog. The problem is my HTML codes are the customize ones. I wonder if you can figuring it out. tq.

  16. add coment to you tips strong article unicque,tahnk you friend

  17. sam says:

    wow,wonderful blog.very helpful & informative content visit here http://www.crifd.com/ for some more similar kind stuff

  18. retnet says:

    thanks. this work perfectly.
    now, how to add reply to reply comment in blogspot same as your blog ?
    thanks be 4… 😀

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here