Advanced Multi Tabbed Widget For Blogger

This is a new version of multi tabbed widget, in my previous post i have discuss on how to add a multi tabbed widget but that's an old version of multi tabbed widget and not fully widgetized because you can't add blogger official widget like archive, about me, labels e.t.c except you create a html code for the widget, but with this new version of multi tabbed widget, you can add both blogger official widget and html codes.
By default this widget will appear at the top of your sidebar, but i will also discuss on how you can place it at the bottom of your sidebar and i have made it so simple to implement, just follow the few steps below and get your multi tabbed widget appeared on your blog.

Multi Tabbed Widgets

Create a multi tabbed widget for blogger - Style 01

Advanced multi tabbed widget for blogger - Style 02

New advanced multi tabbed widget for blogger blog - Style 03

How To Add The Multi Tabbed Widget

STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > back up your template
• Use ctrl F to find ]]></b:skin> and paste the following code above/before ]]></b:skin>

/*----- Multi Tabbed Widget By www.realcombiz.com----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECdQUQe8vEtExZ18trh67QKBH-_BAVweNlqZnKfQB1Il_zHLwds7qJ1JY2qV8CHM74n-MbPwSvWT_WixMKk_kaP01FaNWbvzvMmKDs-cNVr5Kg6yrcZhBVO3e-ScXu7UTuNeN_8Dfz9Wl/s1600/rb+multi+tabbed+widget.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECdQUQe8vEtExZ18trh67QKBH-_BAVweNlqZnKfQB1Il_zHLwds7qJ1JY2qV8CHM74n-MbPwSvWT_WixMKk_kaP01FaNWbvzvMmKDs-cNVr5Kg6yrcZhBVO3e-ScXu7UTuNeN_8Dfz9Wl/s1600/rb+multi+tabbed+widget.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

STEP 2

• Now find <div id='sidebar-wrapper'> but in some templates especially the new blogger templates, you may not find that, then find <div class='column-right-inner'> and paste the following code below/after any of the code you find

<div class='tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
     
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Archive</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Labels</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Comments</a></li>
<li><a href='#widget-themater_tabs-1432447472-id4'>About</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                     
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                       
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
</b:section>                                      
</div>

</div>

<div style='height:5px;clear:both;'/>

• Replace Archive, Labels, Comments and About with the title of each tab you are adding and click "SAVE TEMPLATE"
• Now go to "Page elements" and you will see something similar to the image below at the bottom of your sidebar layout

• Click "Add a Gadget" to start adding gadget under each tab.

Positioning

As i have said earlier on, the widget will appear at the top of your sidebar but if you which to position it at the bottom of your sidebar then follow this step.
Instead of adding the code in step 2 below any of the two code above, paste it above </div> as shown in the image below

That's all, keep adding more widget and enjoy.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz