Tabbed Social Media Follow Widget for Blogger

How to Add Tabbed Social Media Follow Widget in Blogger Blog? Lear how to add Twitter Fan box in Blogger Blog. How to Add Pinterest Follow button. How to add facebook fan box. Tabbed Social Media Follow Widget for Blogger Blog

Social Media is one of the easiest way to interact with your blog readers and share your new blog posts to get maximum traffic to your blog. Social Media also helps bloggers to increase traffic to their blog. There are so many social media sites now a days but in my opinion, top 4 websites are: Facebook, Twitter, Google+ and Pinterest. You can also add Instagram as well. In my last tutorial, I showed you how you can add awesome Facebook popup like box in blogger blog and today I will show you how you can add an awesome tabbed social media widget to your blogger blog to increase your followers on top social media websites. This widget is one the finest social media widgets you will ever see and is made by HelperBlogger. This widget will surely increase your fan following on social media websites. This widget is light weight and does not require any JQuery plugin, that makes it easy to install for beginners as well as developers, So let's begin this tutorial:

Installation Process:

1. Go to Blogger Dashboard >> Layout >> Add a Gadget
2. Select HTML/JavaScript gadget
3. Copy the below code and paste in HTML/JavaScript gadget code area.

<style>
    /* Tabbed Social Widget By Trickz Bucket - TrickzBucket.Blogspot.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(http://1.bp.blogspot.com/-XoUjhUwwcsA/VIh-sZtQNbI/AAAAAAAADwk/ECGNslzqmAw/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 Trickz Bucket - TrickzBucket.Blogspot.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="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view1">
            <img height="32" src="http://1.bp.blogspot.com/-u4mNaIL8dp0/VIXIENew_CI/AAAAAAAADvg/ne3Aol0ASeI/s1600/helperblogger.com-fb.png" width="32" />
        </a>
    </li>
<li>
        <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view2">
            <img height="32" src="http://2.bp.blogspot.com/-mzuxb3eVkaQ/VIXIE4zdcPI/AAAAAAAADvw/lwTtNBnT4zQ/s1600/helperblogger.com-twitter.png" width="32" />
        </a>
    </li>
<li>
        <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view3">
            <img height="32" src="http://1.bp.blogspot.com/-rrTnEmJBPeI/VIXIELyFe_I/AAAAAAAADvk/TyNg-Jocujc/s1600/helperblogger.com-gplus.png" width="32" />
        </a>
    </li>
<li>
        <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view4">
            <img height="32" src="http://4.bp.blogspot.com/-oiG2eSzC0ZY/VIXIEEtXGjI/AAAAAAAADvo/0jbevzq2uog/s1600/helperblogger.com-pinterest.png" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
<div id="view1">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTrickzBucket&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" style="border: none; height: 180px; overflow: hidden; width: 285px;"></iframe>
    </div>
<div id="view2">
<div id="twitter-box">
</div>
<script>
            var tw_user = 'trickzbucket';
            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 async="" defer="" src="https://apis.google.com/js/platform.js"></script>
        <br />
<div class="g-person" data-href="//plus.google.com/u/0/116452378152899513532" data-layout="landscape" data-rel="author" data-width="250">
</div>
</div>
<div id="view4">
<a href="http://pinterest.com/trickzbucket/">
            <img alt="Follow Me on Pinterest" src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" height="28" width="169" />
        </a>
    </div>
<div style="clear: both; text-align: right;">
<span style="font-size: xx-small;"><a href="http://trickzbucket.blogspot.com/2016/01/tabbed-social-media-follow-widget-for-blogger.html" rel="dofollow" target="_blank">Trickz Bucket</a></span>
    </div>
</div>

Widget Customization Process:

  • Replace TrickzBucket with your social media username.
  • Replace 116452378152899513532 with your Google+ numeric ID.

Final Words:

This is an awesome widget for your blog. I loved this widget because its simple and clean and does not waste any space. Let me know if you have any problem or difficulties with this widget below in comments and do not forget to share this widget.

COMMENTS

Name

Blogger Templates,5,Blogger Tips,31,Blogger Widgets,9,Computer Tricks,3,Downloads,30,WordPress Tricks,5,
ltr
item
Trickz Bucket: Tabbed Social Media Follow Widget for Blogger
Tabbed Social Media Follow Widget for Blogger
How to Add Tabbed Social Media Follow Widget in Blogger Blog? Lear how to add Twitter Fan box in Blogger Blog. How to Add Pinterest Follow button. How to add facebook fan box. Tabbed Social Media Follow Widget for Blogger Blog
http://2.bp.blogspot.com/-Jk6AZu8q3do/VpgB7pis-1I/AAAAAAAADaA/G8xXCDfMa2g/s1600/Tabbed%2BSocial%2BMedia%2BFollow%2BWidget%2Bfor%2BBlogger.png
http://2.bp.blogspot.com/-Jk6AZu8q3do/VpgB7pis-1I/AAAAAAAADaA/G8xXCDfMa2g/s72-c/Tabbed%2BSocial%2BMedia%2BFollow%2BWidget%2Bfor%2BBlogger.png
Trickz Bucket
http://www.trickzbucket.com/2016/01/tabbed-social-media-follow-widget-for-blogger.html
http://www.trickzbucket.com/
http://www.trickzbucket.com/
http://www.trickzbucket.com/2016/01/tabbed-social-media-follow-widget-for-blogger.html
true
6195765242120428356
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy