Simple Social Media Counter For Your Blogger Blog (Easy To Install)

No comments
Social media counter for your blog (blogger) make things easier for your readers to be able to see the number of fans you have in your popular social media accounts.
simple social media counter for blogger
However, this post is to allow you add a widget to your blogger blog that will help display the number of counts on social media like Facebook, Twitter and RSS feed.

The code which I’m sharing with you guys today, is a simple code which displays the count for your fans on the social media, that you need just to add as a widget, you do not need to edit the HTML of your blog, I have worked on the code to make things easier for you.

Adding simple social media counter/widget to blogger

To add the social media counter to your blogger blog, Follow the steps below
1. Go to your blogger dashboard
2. Click on Layout
3. Click on add Gadget
4. Select HTML/JavaScript widget, and paste the code below
5. Save the widget and you are done.



<--!simple social media counter start www.aristocratworld.com-->
<div class="sidebarContainer" id="sidebarSubscribe">
            <a target="_blank" href="http://feeds.feedburner.com/blogspot/oLVBa" 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/aristocratworld" class="subscribeSidebarBox" id="followTwitter">
                <span class="icon"></span>
                <span class="title">Follow Us on Twitter</span>
                <span class="count">400+</span>
            </a>
         
            <a target="_blank" href="http://www.facebook.com/aristocratworld" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">Like Us On Facebook</span>
                <span class="count">500+</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: #33E3FF;
    border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
    background-color: #FDFDFD;
}

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

</style>
<--! simple social media counter stop www.aristocratworld.com-->




Further customization:

Simply change the URLS in the code, change http://feeds.feedburner.com/blogspot/oLVBa to your own blogger RSS feed URL, change the Twitter handle URL http://www.twitter.com/aristocratworld to your own, change the Facebook page URL http://www.facebook.com/aristocratworld to your own page URL.

Furthermore, if you are familiar with CSS (cascading style sheet) you can customize the border radius, the background color and hover colors just to look the way you want.


At this point, I should be rest assure this tutorial was able to help you add a social media counter to your Blogger blog.
Be social, share with friends on the social media.

No comments :

Post a Comment

Your comments are of extreme importance to us...