Customize Blogger Default Follower Widget

Tweet

In their ceaseless quest to make the world a Googlier place,Google recently integrated the Blogger Followers gadget withGoogle 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.Here am going to share this with our readers.For Demo you may check the below screenshot. How to Do This? 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. 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.

In their ceaseless quest to make the world a Googlier place,Google recently integrated the Blogger Followers gadget withGoogle 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.Here am going to share this with our readers.For Demo you may check the below screenshot.

How to Do This?

• 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.

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.

Kindly Bookmark and Share it: