Social Media Blogger Widget With Fans Counter

Social Media Blogger Widget With Fans Counter

Fans Counter Social Media Widget for Blogger Blog
Fans Counter Social Media Widget

Are you searching for Attractive Sidebar Social Media Widget For Blogger Blog which is included with fans counter, Then don't worry guys i am here for help you. In this post i am going to explain how to add social media blogger widget with fans counter. Actually this is just widget. You can add it to your blog easily. follow below steps. By using this widget you can link your social media profile Facebook,Twitter and RSS and YouTube. You have to update counter manually. You can check it from below demo link. 

A green button with the word Save! on it

Method For Adding Social Media Blogger Widget With Fans Counter To Blogger Blog

Now Start adding this widget in your Blogger Blog, This Trick is very easy and i always try my best and use simple language by which you can easily understand my language and i am always here for help you. So now come back on point and Lets Start this tutorials. Follow these steps which is mentioned below-
  • Go To Blogger Dashboard.
  • Now Click On Blog for which you want to use this widget.
  • Now Click On Layout which is in right side of your computer screen
  • Now Click On Add A Gadget.
  • Here you have a long list, But choose here HTML/JavaScript.
  • Now Copy this Code which is given below and paste it into your HTML/JavaScript bar which is open in incognito window Tab of your browser.
<style>
.MBG_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.MBG_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.MBG_widget li a{display:block;text-align:center;}
.MBG_widget li a strong{ background:url(http://2.bp.blogspot.com/-ZPtNIEBF1qY/Vg_-nNpvMlI/AAAAAAAADkg/pYLYG-9JE9Y/s1600/MBG-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}
.MBG_widget li a:hover strong{opacity:1;}
.MBG_widget li:hover a{text-decoration: none;}
.MBG_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.MBG_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.MBG_widget li.rss-subscribers span{display:block;font-size:21px;}
.MBG_widget li.facebook-fans a strong { background-position:center -1192px ;}
.MBG_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.MBG_widget li.twitter-followers a strong{ background-position:center -868px;}
.MBG_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.MBG_widget li.youtube-subs a strong{ background-position:center -976px;}
.MBG_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.MBG_widget li span{display:block;font-size:21px;}
.MBG_widget li a small{color:#777;}
</style>

<br />

<div class="widget MBG_widget"> 
<ul style="margin-left: -40px;">
<center><h1>Connect with Us</h1></center>
<li class="rss-subscribers">
<a href="http://feeds.feedburner.com/MyBloggerGuides">
<strong></strong>
<span>3,358</span>
<small>RSS Feed</small>
</a>
</li>
<li class="twitter-followers">
<a href="http://www.twitter.com/MyBloggerGuides">
<strong></strong>
<span>5,948</span>
<small>Followers</small>
</a>
</li>
<li class="facebook-fans">
<a href="http://facebook.com/MyBloggerGuides">
<strong></strong>
<span>2,599</span>
<small>Fans</small>
</a>
</li>
<li class="youtube-subs">
<a href="http://www.youtube.com/MyBloggerGuides">
<strong></strong>
<span>1,561</span>
<small>Subscribers</small>
</a>
</li>
<div id="widgetbox" style="border-top: 0.1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:5px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggerguides.com/2015/10/social-media-blogger-widget-with-fans-counter.html" target="_blank">Get Widget ยป</a></span> </div> <!-- End Widget --> 
</ul></div>

  • Remove Yellow Highlighted Words into yours.
  • Now Click On save button.
  • That's It, You Have Done It Successfully. ๐Ÿ™‚  Now Open your Blog in new window and enjoy this awesome widget.

So above is all about Social Media Blogger Widget With Fans Counter For Blogger Blog. I hope by this tutorial you can easily add this widget in your Blog.  If you still facing any problem related this article then you can drop a comment in comment Box. I try my best to help you. Hope this Recommendation Social Media Widget helps to increase your followers and also page views. ๐Ÿ™‚ ๐Ÿ™‚ If You like this post then please don't Forget to share it with others.

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)