Customize Blogger Default Follower Widget

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 we discovered a way ourself.Here we're going to share this with our readers.For Demo you may check the above screenshot.

 Must Read : Facebook Floating Like Box For Blogger

Customize Blogger Default Follower Widget

• In Blogger Dashboard Go to Design /  Edit HTML.
• Click "Expand Widget Template".
• Download the Full template before making any changes in it

Find following piece of code in blogger template.

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div>

and replace it with this code

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'> <b:includable id='main'> <!-- only display title if it's non-empty --> <div class='widget-content'> <data:content/> </div>

Now search for "]]></b:skin>" and before it paste the following code

#Followers1 { background-image: url(http://1.bp.blogspot.com/-o-4O3KgVjAQ/UO_zojT3x5I/AAAAAAAAAa0/cqIoRoPQKis/s1600/BCM.png)!important; background-position: top left; background-repeat: no-repeat; height: 282px; width: 280px; margin-left: 10px; } #Followers1 .widget-content { border: 3px solid #2E6886; margin: 30px; width: 294px; margin-left: -10px;

Now save the template and you're done.

 Must Read : Add Marquee on Your Blog


On daily basis millions of such tutorials being shared by bloggers on various sites.Just like those we shared this tutorial,hope it worked,thanks.

Articles You May Like