Monday, 23 May 2016

3 Easy Steps to Custom Blogger Avatars

Custom Avatars for Anonymous Blogger Comments in 3 Easy Steps

If people comment on your Blogger anonymously, or don't have an avatar picture set, you either get the blank little head or shoulders or the little orange B logo. Nothing wrong with that, but it's a bit boring. Wouldn't it be cool to pick your own image? I came across a tutorial to do just that and thought, hey, that sounds like a cute thing I could do in just a couple of minutes.

I was wrong. So very wrong.

It took me almost two hours of trial and error to find code which actually worked.

To save other Blogger users similar bouts of frustration, here is the code which will replace anonymous avatars with an image of your own choosing. And it will take you just a couple of minutes!

Step One

To find out the size of your current comment avatars, you can right click on one and choose 'inspect' to reveal the dimensions. That done, you can use a free online tool like Picmonkey to scale down your chosen image.

Right now I'm using a picture of the world's greatest singer / artist / chef / runner / comedian / DJ (i.e. Zippy from Rainbow):

Zippy from Rainbow


Step Two

Log on to your Blogger dashboard. Click 'Template' and then 'Edit HTML'. Hold CTRL+F to open a search box - search for '.avatar-image-container'. If it's there, you can just modify the existing code. If not, you'll have to add it in. (Search for '</b:skin>' and add in the new code just above it.)


You can modify all of this to suit your own requirements - make the image larger, or smaller, and the same with the margin. You can remove the border, make it wider, change it from 'solid' to 'dashed' or 'dotted'. Because the new image just sits underneath every avatar it is visible around the edges - I added a border to detract from this, but you could use a centered image on a transparent background to avoid the problem.


Step Three

When you're happy with your code, click 'save template' and bask in the glory of your new avatars.





For more like this, please click the image below:
Blogging Guides





newerPageTitle olderPageTitle Home