Display A Default Avatar Image For Anonymous Comments On Blogger


In the comments for my Recent Post about the New Blogger Design And Dashboard Going Live Ahmad Nuzul Asked "Can u make a post on how to make a custom avatar for anonymous comments? Thanks.".

No Problem !  In this post i will show you how you can have a default image appear as the Avatar Thumbnail for comments not only by anonymous commenter's but also for comments left using some of the other log in options or people that have no Image Uploaded to their Blogger / Google account.

Live Demo - Demo Here

Extra - We Have A Video Tutorial Below The Steps.

This is Really simple and you can of course choose the image that will be used.Thanks to Ahmad for the question if you have any questions just ask as you may have a great idea for a post that i have not thought of.We have two methods both using just a snippet of code, first you can see how to add it to your template and secondly you will see how to add via the template designer.

Quick Note On The Spice Up Your Blog Comments, i have had a lot of questions about the design and comment platform options i have on this blog.The design of our comments is very advanced and is only available to be installed by us via the Hire Us Page.The Comment platform options, having Blogger, Disqus and Facebook comments still isn't perfect but when it is i promise i will show how it's done in a tutorial.

Add A Default Image To Anonymous Comments On Blogger

Method 1. Add Code Directly To Template.

Step 1. Find an image - You will of course need a default image, the image should be around 24 to 48 pixels (See Video For Tips On Getting An Image).

Step 2. In your Blogger Dashboard click Design > Edit Html

Design Edit Html Blogger

Step 3. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code On Blogger)

Step 4. Copy And Paste The Following Code Directly Above / Before ]]></b:skin>
.avatar-image-container { background: url("AVATAR-URL-HERE") no-repeat scroll center center;}

Step 5. Replace AVATAR-URL-HERE with the URL for the avatar you picked and save your template.

Method 2. Add Code To Template Designer

Step 1. In Your Blogger Dashboard Click > Design > Template Designer > Advanced > Add Css > Paste The Following Code Into The Section Provided :
.avatar-image-container { background: url("AVATAR-URL-HERE") no-repeat scroll center center;}

Step 5. Replace AVATAR-URL-HERE with the URL for the avatar you picked and click apply to blog.

Video Tutorial

That's it, told you it was easy ! Make sure to Check out more of our Comments Tips And Tricks.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. wow, Working GREAT... Thanks for this tip
    can you alos upload or add some 'Avatars' on this page too??

  2. Sorry, I'm a bit slow at this. I found a google image I like, in the right size, but how do i get the code?

  3. @ Benta - Save the image to your computer, right click over the image and click 'save image as' from the menu that appears.Then upload the image to your blog or image hosting site.

  4. How do you put those little icons beside your post details (author, date, label) and make them appear below your post title? Please help.

  5. @ Redcherii - It's not too hard to do but more that can be explained in a comment.It is actually a good idea for a post and you could use any icons so i will put it in the 'to do' pile and will cover it in a post over the next week.

  6. Thanks for making this post for me =D

    Really appreciate it!

  7. Okay then. I'm looking forward to see the post! Oooh if you don't mind, I'd like to ask one more question. How do you make your post title still clickable even after you've opened the post? Thanks. :)

  8. Hello, my readers (wich ae actually about 10-15 family and friends lol) have a problem leaving comments because they dont know what a URL is so they use anonymour sometimes but they would rather I know who they are. Is ther anyway to customize that part of the comments section?

  9. @ MariB - There is only so much we can do and we can make no actual changes to the comment form it's self as it's an iFrame.Let your readers know they can use the Name URL without actually adding a URL just the name will do.You can add a message above your comment form by going to your settings > comments and adding it in the comment form message section.

  10. Paul, again you have provided excellent help on this topic. I always appreciate your tutorials!

  11. Thanks Tracy glad you liked it :D

  12. works fine for me.. thanks

  13. hey paul thanks it works perfectly

  14. how to resize image , paul ??

  15. sir , can you help me ??
    how to alter the display size of the image?

  16. is there a way to upload an avatar for women and one for men, or different avatars for people to choose from?

  17. I've tried it and succeeded, but I have one question, I use my own avatar image whose size is larger. how to resize the avatar according to the size of our own. thanks

  18. great! finally i found this trick :D

  19. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

  20. How do you do this in the new blogger interface?


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us