How to customise the Blogger Followers gadget

In their ceaseless quest to make the world a Googlier place, Google recently integrated the Blogger Followers gadget with Google Friend Connect. Unfortunately this caused some adverse side-effects – the most obvious being that the gadget appeared to grow enormously fat while ignoring any custom styling you may have implemented.

Well after trying in vain to find directions to tame my wayward Followers gadget – I discovered a way myself...

Now from the get-go I should mention that it’s relatively easy to change the links, text colour and border of your Followers gadget simply by using the “Edit” option in the Blogger “Layout Edit Layout/Page Elements” screen.

The default Edit mode

However some aspects of the gadget are controlled by java scripting to which us humble bloggers have no access – well as far as I am aware anyway.

But if you open up your Blogger template (with the Widget Templates expanded) and skim through the code until you find your Followers gadget you will notice that (like every Blogger gadget) it has its own unique id. This is usually something like “Followers1.”

Once you identify the id of your Followers gadget it’s simply a matter of adding some CSS style rules in the header of your Blogger template.

For example in this blog I added the following:

#Followers1 {
background: #FFF;
border: solid 1px #CCC;
}

Find the gadget's id in your template

This appears to successfully override some of that tricky java script styling.

Anyway – give it a try but, as always, make sure you backup your Blogger template first!