Simple social following widget for blogger and wordpress

In this post I am going to show you how to add a simple clean Social Following widget withFacebook, Twitter, and Google plus, RSS and YouTube logo. I designed this widget especially for my blog. But now I decide to shear this widget with all bloggers, and then I create this post for who want to use it. So, if you want to use this widget on your blog just follow my instruction bellow, and see our given screenshot to know how this widget is.

How To Add This Social Widget On Your Blogger Blog?

Now just follow my given instruction to add this widget to blogger /blogspot.

• Go to Blogger Dashboard > Locate your Blog > Layout
• Select an HTML/JavaScript Widget.
• Copy bellows code and Paste into the widget.
• Save the gadget and you are done! 

How To Add This Social Widget On Your Blogger And Wordpress Blog?

This widget adding process is very easy and some thing like blogger. 

• Go to wordpress Dashboard > Appearance > Widget
• Add a Text Widget
• Copy bellows code carefully and Paste into the widget.
• Save the Widget and You have done!                                                                       <style> 
  /*-----Social Follow-----*/ 
  #mbb-follow{ 
  border:1px solid #ccc; 
  padding:10px 10px; 
  overflow:hidden 
  } 
  #mbb-follow a{ 
  width:32px; 
  height:32px; 
  margin:0 0 0 25px; 
  display:block; 
  float:left; 
  background:url(http://2.bp.blogspot.com/-4QlhpQi-AJg/UhklcfqM4_I/AAAAAAAABzs/dRPexSvWc50/s1600/ss.png) no-repeat 0 0; 
  line-height:0; 
  font-size:0; 
  color:transparent 
  } 
  #mbb-follow a:hover{ 
  opacity:.5 
  } 
  #mbb-follow a.facebook{ 
  background-position:0 -105px; 
  margin-left:9px!important 
  } 
  #mbb-follow a.twitter{ 
  background-position:0 -70px 
  } 
  #mbb-follow a.gplus{ 
  background-position:0 -140px 
  } 
  #mbb-follow a.rss{ 
  background-position:0 -35px 
  } 
  #mbb-follow a.tube{ 
  background-position:0 0 
  } 
  </style> 
  <!--mbb-follow starts--> 
  <div id="mbb-follow" style="width:275px;margin:0 auto; border:none!important;"> 
  <a class="facebook" href="https://www.facebook.com/smartshivendu" rel="nofollow" title="Facebook">Facebook</a> 
  <a class="twitter" href="http://twitter.com/ smartshivendu" rel="nofollow" title="Twitter">Twitter</a> 
  <a class="gplus" href="https://plus.google.com/112651692514114249576" rel="nofollow" title="Google Plus">Google Plus</a> 
  <a class="rss" href="http://feeds.feedburner.com/mybloggertopic " rel="nofollow" title="Subscribe To RSS">Subscribe To RSS</a> 
  <a class="tube" href="http://www.youtube.com/channel /smartshivendu" rel="nofollow" title="YouTube">YouTube</a> 
  </div> 
  <!--mbb-follow ends-->                                                                                                                                                     Customizations:
  • Now replace green Highlighted link with your Facebook fan page or profile link.
  • Then Replace red highlighted link with your Twitter link.
  • Replace blue highlighted link with your Google plus page or profile link.
  • Replace pink highlighted link with your Feedburner link. 
  • And then last of all replace Purple highlighted link with your YouTube channel link.
  Finally save your template and Visit your blogs to see it working just perfectly.  Now enjoy this beautiful widget in your blog. Happy Blogging!!!