Tabbed Social Widget For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Thursday, 11 December 2014

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 boxtwitter 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
    • 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)
    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


    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:
        /* Tabbed Social Widget By Helper Blogger - */
        /* 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( 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 - */
        /* End Code Start */
    <script src="" type="text/javascript"></script>
    <ul class="tabs">
        <li class="selected">
            <a href="#view1">
                <img src="" height="32" width="32" />
            <a href="#view2">
                <img src="" height="32" width="32" />
            <a href="#view3">
                <img src="" height="32" width="32" />
            <a href="#view4">
                <img src="" height="32" width="32" />
    <div class="tabcontents">
        <div id="view1">
            <iframe src="//;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 id="view2">
            <div id="twitter-box"></div>
                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 = '//';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
        <div id="view3">
            <script src="" async defer></script>
            <div class="g-person" data-width="250" data-href="//" data-layout="landscape" data-rel="author"></div>
        <div id="view4">
            <a href="">
                <img src="" width="169" height="28" alt="Follow Me on Pinterest" />
        <div style="clear: both; text-align: right;">
            <span style="font-size: xx-small;"><a href="" rel="nofollow" target="_blank">Blogger Widgets</a></span>

    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...


    1. Thank you Information that you convey is very useful, waiting for the next update friend, Greetings Success :)
      bandar judi online

    2. Truth is, social media isn't at all completely mechanized, and you truly need to sign in each time you need to make new posts or transfer documents and photographs.

    3. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. Product description review writers

    4. This seems to be very interesting! I am a writer and I am looking out for ways to reach out to people and what better than this. I will meet a facebook ad management and start working on it. I am sure I will get some popularity with this and my words will be read everywhere.

    5. Moviebox for iPad MovieBox allows downloading and watching movies in your smartphones for free. It is one of the most popular apps in the movie entertainment category

    6. Thanks for another wonderful post. Where else could anybody get that type of info in such an ideal way of writing? Hostgator 60 off coupon code

    7. - Hotmail Sign in/Up - Login Inbox, sign in, hotmail uk, create hotmail account, sign in.

    8. Thanks for another wonderful post. Where else could anybody get that type of info in such an ideal way of writing? Webmetrix Group Top Rated SEO Company


    If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM