Create a Social Media Fans Counter Widget in Blogger

By Zohaib Liaqat - 55 Comments

Recently we shared Flat Style Tabbed Social Media Widget for Blogger and today we're here with another amazing widget Social Media Fans Counter Widget for blogger. From the day Blogolect Blog was created we tried our best on sharing and developing blogger widgets and we'll continue these efforts. Today we're going to share a social media fans counter widget, this widget displays Facebook, Twitter and RSS buttons in a clean list style with your fans count. This is a clean and simple widget to show to subscribers on your blog and make your visitors get more interested in your blog. So let's begin

Recommended for You:

Flat UI Email Subscription Box For Blogger

Simple Flat UI Email Subscription Widget for Blogger

Social Subscription Widget V2 For Blogger

How to Create a Social Media Fans Counter Widget in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box

<div class="sidebarContainer" id="sidebarSubscribe">
            <a target="_blank" href="http://feeds.feedburner.com/blogolect" class="subscribeSidebarBox" id="subscribeRSS">
                <span class="icon"></span>
                <span class="title">Subscribe to Our RSS feed</span>
                <span class="count">2000+</span>
            </a>

            <a target="_blank" href="http://www.twitter.com/blogolect" class="subscribeSidebarBox" id="followTwitter">
                <span class="icon"></span>
                <span class="title">Follow Blogolect on Twitter</span>
                <span class="count">1000+</span>
            </a>

            <a target="_blank" href="http://www.facebook.com/blogolect.official" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">Like Us On Facebook</span>
                <span class="count">800+</span>
            </a> </div>

<style>
#sidebarSubscribe {
    padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 60px;
    margin-bottom: 8px;
    position: relative;
    width: 265px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 3px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
    background: url("http://4.bp.blogspot.com/-nJyhKwJmZzk/VOiMC_4rKDI/AAAAAAAAG1w/u3P9aicP4LI/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    left: 10px;
    top: 10px;
    width: 55px;
}
#sidebarSubscribe .title {
    font-size: 12px;
    left: 70px;
    top: 8px;
}
#sidebarSubscribe .count {
    font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
    left: 70px;
    top: 23px;
}
#subscribeRSS .icon {
    background-position: 0 -50px;
}
#followTwitter .icon {
    background-position: -100px -50px;
}
#likeFacebook .icon {
    background-position: -200px -50px;
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
    background-color: #FDFDFD;
}

a, a:active {
   text-decoration: none;
}

</style>

Customization:

Replace http://feeds.feedburner.com/blogolect with your RSS feed URL and 2000+ with your RSS Subscribers
Replace http://www.twitter.com/blogolect with your twitter account URL and 1000+ with your Twitter Followers
Replace http://www.facebook.com/blogolect.official with your Facebook URL and 800+ with your Facebook Likes

Click Save button and you're done!

From Editors Desk

We hope this article may have helped you in learning How to Create a Social Media Fans Counter Widget in Blogger. Share this article with your friends and don't forget to subscribe us.