Don't Miss

Flat Style Tabbed Social Media Widget for Blogger

By Zohaib Liaqat - 32 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:

32 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
  9. These styles are really nice, thank you for sharing this kind of coding with us.
    basketballlegends

    ReplyDelete
  10. This is a great little post with some valuable tips. I totally agree. The way you bring passion and engagement into the things you do can really change your outlook on live.
    build royale

    ReplyDelete
  11. An incredible opportunity to me and it would be a amazing expertise to view this site. Very difficult to discover these beneficial website or even blog. bubbleshooterspiel

    ReplyDelete
  12. An incredible opportunity to me and it would be a amazing expertise to view this site.<a https://clashofclansgenerator.net/

    ReplyDelete
  13. افضل شركات الشحن البرى والبحرى ونقل العفش داخل جميع مدن المملكة
    نقل عفش من جدة الى الاردن
    شركة نقل عفش من جدة الى الاردن
    شركات نقل العفش من جدة للاردن
    اجراءات نقل العفش للاردن
    شحن من جدة الى عمان
    شركات النقل البرى من جدة الى الاردن
    شحن اثاث من السعودية الى الاردن
    اجراءات نقل الاثاث من السعودية الى الاردن
    شحن من جده للاردن
    اسعار شحن الاثاث من السعودية الى الاردن
    نقل عفش من السعودية الى الاردن
    شركة شحن من السعودية الى الاردن
    نقل عفش من جدة الى الامارات
    شركة نقل عفش من جدة الى الامارات
    شركات نقل العفش من جدة للامارات
    اجراءات نقل العفش للامارات
    شحن من جدة الى دبى
    شركات النقل البرى من جدة الى الامارات
    شحن اثاث من السعودية الى الامارات
    شحن من جده للامارات
    اسعار شحن الاثاث من السعودية الى الامارات
    نقل عفش من السعودية الى الامارات
    شركة شحن من السعودية الى الامارات
    نقل عفش من الرياض الى الامارات
    شركة نقل عفش من الرياض الى الامارات
    شركات نقل العفش من الرياض للامارات
    اجراءات نقل العفش للامارات
    شحن من الرياض الى دبى

    ReplyDelete
  14. In this post, you can know about the history of MLK, his popular tasks, when he became king and related all information. Stay with me!mlk day 2020

    ReplyDelete
  15. مكتب الشيماء للشحن يسعده تقديم خدمات الشحن البرى من السعودية الى مصر
    يمكنكم الضغط على الروابط التالية لمعرفة المزيد :
    نقل عفش من السعودية الى مصر
    شركة شحن عفش من السعودية لمصر
    نقل عفش من الرياض الى مصر
    شحن من السعودية الى مصر
    شحن من الرياض الى مصر
    مكتب شحن من السعودية لمصر
    دليل شركات الشحن من السعودية الى مصر
    اسعار الشحن من الرياض الى القاهره
    شركات شحن فى الرياض
    شركة شحن من السعودية لمصر
    اسعار شحن الاجهزة الكهربائية لمصر
    اسعار شحن الشاشات من السعودية لمصر
    اسعار الشحن من السعودية الى مصر dhl
    اسعار شحن الاثاث من السعودية الى مصر
    شركات الشحن من السعودية الى مصر
    الشيماء للشحن الى مصر
    شركة الشيماء للشحن البرى لمصر


    نقل عفش من السعودية الى مصر
    شركة شحن عفش من السعودية لمصر
    نقل عفش من الرياض الى مصر
    شحن من السعودية الى مصر
    شحن من الرياض الى مصر
    مكتب شحن من السعودية لمصر
    دليل شركات الشحن من السعودية الى مصر
    اسعار الشحن من الرياض الى القاهره
    شركات شحن فى الرياض
    شركة شحن من السعودية لمصر
    اسعار شحن الاجهزة الكهربائية لمصر

    ReplyDelete
  16. but it will slow down the script

    ReplyDelete

  17. يسعدنا تقديم كافة خدمات نقل العفش والشحن الدولى الى من السعودية الى الاردن من السعودية الى الامارات شحن من جدة للاردن تنظيف منازل وخزانات ورش مبيدات ومكافحة حشرات شحن دولى من الرياض للامارات
    اضغط على الخدمة لتصل الى موقعنا
    نقل عفش من جدة الى الاردن
    شركة نقل عفش من جدة الى الاردن
    شحن الاثاث من جدة الى الاردن
    شركات نقل العفش من جدة للاردن
    اجراءات نقل العفش للاردن
    شحن من جدة الى عمان
    شركات النقل البرى من جدة الى الاردن
    شحن اثاث من السعودية الى الاردن
    اجراءات نقل الاثاث من السعودية الى الاردن
    شحن من جده للاردن
    اسعار شحن الاثاث من السعودية الى الاردن
    رش مبيدات ومكافحة حشرات بجدة
    شركة تنظيف خزانات بجدة
    شركة تنظيف منازل بجدة

    ==========================

    نقل عفش من الرياض الى الامارات
    شركة نقل عفش من الرياض الى الامارات
    شحن الاثاث من الرياض الى الامارات
    شركات نقل العفش من الرياض للامارات
    شركة شحن عفش من الرياض الي الامارات
    شحن من الرياض الى دبى
    شركة نقل عفش من الرياض الى دبي
    شحن اثاث من السعودية الى الامارات
    شركة شحن عفش من الرياض الى الامارات
    شركة شحن من الرياض الى الامارات
    شحن من الرياض للامارات
    شركة شحن من السعودية الى الامارات
    شركة شحن من السعودية لمصر
    شركة شحن من الرياض لمصر

    ReplyDelete
  18. شركة السيف
    نقل عفش وتخزين اثاث وصيانة منزلية ونظافة داخل مدن السعودية وخارجها شحن دولى من السعودية الى الاردن الإمارات الكويت البحرين لبنان جده مكه الطائف الرياض الدمام

    نقل عفش من جد الى الاردن
    شركة نقل عفش من جدة الى الاردن
    نقل عفش من جدة الى الامارات
    شركة نقل عفش من جدة الى الامارات
    شركات نقل العفش من جدة للاردن
    اجراءات نقل العفش للاردن
    شحن من جدة الى عمان
    شركات النقل البرى من جدة الى الاردن
    شحن من جده للاردن
    شركة شحن من السعودية الى الاردن
    شركة شحن عفش من جدة الى الاردن
    نقل عفش من الرياض الى الامارات
    شركة نقل عفش من الرياض الى الامارات
    نقل عفش جدة
    افضل شركات نقل العفش بجدة
    ارخص شركات نقل العفش بجدة
    شركة نقل عفش جده ومكة
    نقل عفش جدة
    افضل شركات نقل العفش بجدة
    ارخص شركات نقل العفش بجدة
    نقل عفش مكة
    افضل شركات نقل العفش بمكه
    ارخص شركات نقل العفش بمكه
    نقل عفش جدة الحمدانية
    نقل عفش جدة السامر
    نقل عفش جدة ابحر الشمالية
    نقل عفش جدة ابحر الجنوبية
    ونيت نقل عفش بجدة
    دباب نقل عفش بجدة
    دينا نقل عفش بجده
    نقل عفش

    ReplyDelete

  19. اذا كنت تود الانتقال بصورة كاملة من السعودية للامارات فمن البديهى انك قد تحتاج الى شركة نقل عفش من جدة الى الامارات وهنا من داخل موقع مؤسسة الاحمدى الذى صممناه خصيصا لتقديم كافة خدمات الشحن الدولية

    نقل عفش من جدة الى الامارات - شركة نقل عفش من جدة الى الامارات - شحن الاثاث من جدة الى الامارات - شركات نقل العفش من جدة للامارات - شركات شحن من جدة للامارات - شحن من جدة الى دبى - شركات النقل البرى من جدة الى الامارات - شحن اثاث من السعودية الى الامارات - شحن من جده للامارات - اسعار شحن الاثاث من السعودية الى الامارات - افضل شركات نقل الاثاث الى الامارات - نقل عفش من السعودية الى الامارات - شركة شحن من السعودية الى الامارات - شركة شحن من جدة الى دبى - نقل عفش من الرياض الى الامارات - شركة نقل عفش من الرياض الى الامارات - شحن الاثاث من الرياض الى الامارات - شركات نقل العفش من الرياض للامارات - شركات شحن العفش من الرياض للامارات - شحن من الرياض الى دبى - شركات النقل البرى من الرياض الى الامارات - شحن اثاث من السعودية الى الامارات - افضل شركة تنظيف بالباحه - شركة تنظيف خزانات بالباحه

    ReplyDelete
  20. The information you share seems to be quite useful, thanks a lot.
    basketballlegends

    ReplyDelete