Tabbed Social Widget For Blogger

Social widgets on your website allows your readers to follow you on social network without leaving the page.Presenting you another social subscription widget which contains facebook like box, twitter fanbox, google+ follow badge and pinterest follow button.In this widget I am using javascript tabs plugin. Now let me show you how to add this widget to your blog.

Live Widget Demo

Why you should use this widget

1. Light weight (No jQuery  included)
2. It will save a lot of space on your blog as it is tabbed
3. 4 top social networks included
4. It will boost you follower count on your social network
5. Easy to install (No need of copy-paste or changing username)

Things you need before installing this widget

1. Some basic things you will need
• Facebook page username
• Twitter Username
• Google+ Numeric ID
• Pinterest username
2. In order to use twitter fanbox widget you have to authorize fanbox widget using your twitter account, to authorize twitter fanbox widget follow below steps (or you can see this post)
• First login to your twitter account (link opens in new tab)
• Now open this link
• Click on Yes 
• You are done

How to install this widget?

For easy installation process I have created a blogger widget generator for this widget which will allow you to implement this widget without any copy-paste or without touching coding section.

1. Input right usernames in fields
2. Click on Generate button
3. It will generate code code of your widget
4. Click on Add to Blogger button
5. Select you blog from dropdown list
6. Finally save widget 
7. That's it :) Isn't it easier?? :D

Widget Generator

OR

If you want to add this widget manually then follow below steps

1. Input right usernames/id's
2. Copy the code
3. Login to your blogger account
4. Go to Layout
5. Click on Add Widget > HTML/Javascript
6. Paste code and save it
7. BoOm!!! Now open your blog...

Facebook Fanpage Username:
Twitter Username:
Google+ Numeric ID:
Pinterest Username:

<style>
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* CSS Code Start */
    
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 3px;
        /*distance between tabs*/
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border: 1px solid #CCC;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
        border-radius: 3px 3px 0 0;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        border: 1px solid #B7B7B7;
        background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnO5CS8-BSn4S0-3pTYhE6xxFWdfq4c9-EfhEAqs1-akPvySSL0Rkto8cSr0vjWWFwTVMAm9VkLEyZy-vdVunhaJc6vUIDtX6qNItJy322uON8Bu5xE3AJSmVHDHEKgt1vAtXsxDlwh0/s1600/hb-tabbg.gif) 0 -50px repeat-x;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: white;
        border: 1px solid #B7B7B7;
        border-bottom-color: white;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #B7B7B7;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#view1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOCiC2ECEp6Mnta3KNVCoQ847cY97lDgP-udnGoqMoqjh4WMbqAdRxSqqBNXwuSmLMidEeDUMQtYxwGwRg8eizAzw2Co9Md7AmkzrBCYAPAixZQZPKaMsAcNXrRMRQUKOByYjkPBtlOvU/s1600/helperblogger.com-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view2">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCbT5EgkhWkhjhmCNDNqRKCChvo48NQKxN_dDw088SrHxuVT2DDAMQWjlvP7F3F7WUls0ytvm-X8HQ9qUwqGaEbPUd0LrgROGJUPAEGzrDIbkdhbLLpWj_-PdzvU_YGbm2yd1g4Jggpw/s1600/helperblogger.com-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view3">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM3y-dBXQCyTowfws-a4KDfOB2IFQeA_ZbILjMNk9QHu7Xz2MSpwvYsgWj9gU6tcS-o6RVEm7SIU6oHoSabeFuB9R6VAHaA6cse45NFgQV6of2oXy7_ZVk9bJL10Wi0OjeQMV_Ni1UcY/s1600/helperblogger.com-gplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNX2zFXPs9QPsVuFsd28tLw3b_bKOa6rQiF8Af-Ncqnds9kGJ-2SN_AzkcD31DZnLPeF2xNGeMXuViiFI43IQvW1ZP8DuU_ZOkeTsblsEEdMXLNHCGnDFBLlFBfLZdiaavWUYL0gFSLw/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="view1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
    </div>
    <div id="view2">
        <div id="twitter-box"></div>
        <script>
            var tw_user = 'helperblogger';
            var tw_width = 260;
            var tw_height = 250;
            var no_face = 8;
            (function() {
                var tw_box = document.createElement('script');
                tw_box.type = 'text/javascript';
                tw_box.async = true;
                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
            })();
        </script>
    </div>
    <div id="view3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/106527290580119996124" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="view4">
        <a href="http://pinterest.com/helperblogger/">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
    <div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
    </div>
</div>

Note
This widget looks great in siderbar of your blog having width of 290px or more if your using this widget in any section having width less than 290px then you have to edit CSS code of widget, don't worry I will help you in this case as soon as possible :)

Let me know your thoughts on this widget...
Regards...