Display A Default Avatar Image For Anonymous Comments On Blogger

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

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)

---

]]></b:skin>

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.

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.