15 January 2013

Customize Blogger Default Follower Widget

// // 12 comments


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.


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

12 comments: Leave Your Comments

  1. Oh nice! I will give this a try on my blog. :)

    ReplyDelete
  2. Oooh, now I know how to tweak that part of my page even more! Hah! Thanks for this! :D

    ReplyDelete
  3. another new thing for blogging sphere,, thanks

    ReplyDelete
  4. This is good, but does this apply to Wordpress blogs as well?

    ReplyDelete
  5. This is nice! Will definitely try this. Thanks!! :)

    ReplyDelete
  6. Great fun here :) enjoying your tutorials...!!!

    ReplyDelete
  7. Thank you for this post. Just wanted to know, is there a way to change the color of the 'Follow' button to match the color of the theme?

    ReplyDelete