Don't Miss

Flat Style Tabbed Social Media Widget for Blogger

By Zohaib Liaqat - 12 Comments
Are you fed up with those old style Social Media subscription styles? Are you Looking for something new? So to fulfill all your needs, today we're going to share a simple and attractive Flat Style Tabbed Social Media Widget for Blogger that we just customized. As you know that Flat Style is the hottest style nowadays. The widget we're going to share today is a Tabbed Widget with Social Media tabs in a simple Flat design and it'll definitely attract your visitors. This widget consists of four different tabs Facebook, Twitter, Google Plus and Pinterest. So, add this widget to your blog and impress your visitors.

Recommended For You:
Flat Style Tabbed Social Media Widget for Blogger

How to Add Flat Tabbed Social Media Widget to 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

<style>
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #00B366;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        background: #007D47 ;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: #007D47;
        border-bottom-color: #007D47;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #007D47;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
</style>


<script src="http://yourjavascript.com/1125723322/blogolect-tabber.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#tab1">
            <img src="http://2.bp.blogspot.com/-iZnFfsw5n3g/VNDTJ_icU2I/AAAAAAAAGr0/yV2eKO4mDrc/s1600/blogolect-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab2">
            <img src="http://4.bp.blogspot.com/-elLNPwZLWqY/VNDTKulhGvI/AAAAAAAAGsA/vAhxOwpllOk/s1600/blogolect-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab3">
            <img src="http://2.bp.blogspot.com/-mPvjZsrlLg8/VNDTJ37JS3I/AAAAAAAAGsI/WZIKEEntiG4/s1600/blogolect-googleplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab4">
            <img src="http://4.bp.blogspot.com/-xhExOFFbw-Q/VNDTJ1Kri6I/AAAAAAAAGr4/tQ2X6r2WBzk/s1600/blogolect-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="tab1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogolect.official&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="tab2">
        <div id="twitter-box"></div>
        <a href="https://twitter.com/blogolect" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @blogolect</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div id="tab3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/+zohaibliaqat" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="tab4">
        <a href="http://pinterest.com/blogolect">
            <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.blogolect.com/2015/02/flat-style-tabbed-social-media-widget.html" rel="dofollow" target="_blank">Get this Widget</a></span>
    </div>
</div>

Customization:
  • Replace blogolect.official with your Facebook Page Username
  • Replace both blogolect with your Twitter Username
  • Replace +zohaibliaqat with your Google Plus Username
  • Replace blogolect with your Pinterest Username

Click Save button and you're done!

From Editors Desk

We hope this article may have helped you in learning How to Add a Flat Style Tabbed Social Media Widget for Blogger. Share this article with your friends and don't forget to subscribe us.

Tags:

12 comments to ''Flat Style Tabbed Social Media Widget for Blogger"

ADD COMMENT
  1. This is really a awesome widget.You could also refer to these widget , visit here : http://bit.ly/getsitecontrol

    ReplyDelete
  2. This is really a awesome widget.You could also refer to these widget , visit here : http://bit.ly/getsitecontrol

    ReplyDelete
  3. Individual Goods - Personal merchandise, for example, toiletries, pharmaceuticals and diapers, are frequently not thought of as important, aside from when you are without them!
    usacheckcashingstore.com/san-diego

    ReplyDelete
  4. You should compose a watch that is dated one month from the day you are getting the credit. It is essential that you reimburse the credit before this date arrives!
    Payday Loans Chicago

    ReplyDelete
  5. Be that as it may, there are times when you experience certain monetary issues in the most startling circumstances.
    Cash Advance

    ReplyDelete
  6. At first look, the thought may appear like the ideal fix for your budgetary troubles. Payday credits can come through when there's no other option to enable you to take care of the expense of that must-have thing.
    Car Title Loans Chicago

    ReplyDelete
  7. ومن اخطر أنواع الحشرات الجائز تواجدها في المنزل حشرة الوزغ. فهي من الحشرات الضارة التي تضر الإنسان وتضر طعامه إذا لامسته بل أنها من الممكن أن تتسبب في مرض البهاق لا قدر الله.
    شركة رش مبيدات بحائل
    شركة رش مبيدات بالاحساء
    شركة رش مبيدات ببريدة
    شركة رش مبيدات بابها

    ReplyDelete
  8. Our essay writing help service services are very affordable as we provide you with work that is at a golden equilibrium, try our top paper writing services today.

    ReplyDelete