Add Editable Multi Tab widget for Blogger blog

 

Covering all types of information in single widget makes sensible for visitors to search easy and consuming space for this widget is less. Instead of adding multi widgets to sidebar there might be no chance of adding other Ads widgets or SEO related widgets on sidebar. Adding multi Tabbed widget to sidebar in single widget makes more space and looks blogpage very attractive and this way readers can check all the information in single widget.
Acutally this is an code copy of Wordpress menu tab widget, BlogTariff specially designed for blogger to add easily to thier blogs. We hope this widget makes you enjoy and let's begin the tutorial.

VIEW DEMO

How to Add Menu Tab Widget for blogger

Sign into your blogger account
Click on "EDIT HTML" (Before execution Backup your template, if anything goes wrong you can reuse it again)
Now, search for

]]></b:skin>

After finding the code paste the following code just below to it -- Download Now
After pasting code copy the below code and paste above to ]]></b:skin>

/*----- BTF Multi Tab Widget ----*/
.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/AVvXsEh3IQIHTB3lCs3-r5r3CUCnQFIuRMpm-aVaWI40ojW6Zou0zqyWBaxANYqOox21AJQUh9mwOa0xXSDPc1Gn45tqTIemGhv0iXeQ8C94c0iF2lxm_MKxHHgp66_ZFoeK7PrxA9M39Q5ymmz3/s760/tabs-widget-bg.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/AVvXsEh3IQIHTB3lCs3-r5r3CUCnQFIuRMpm-aVaWI40ojW6Zou0zqyWBaxANYqOox21AJQUh9mwOa0xXSDPc1Gn45tqTIemGhv0iXeQ8C94c0iF2lxm_MKxHHgp66_ZFoeK7PrxA9M39Q5ymmz3/s760/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Most of the blogger templates are built with different coding so, better to find the below matching code to finish the work/experiment after pasting the final below code.
Now Search for code

<div class='column-right-inner'>

or
Search for code

<div id='sidebar-wrapper'>

Find which code matches in your blogger template, after finding the code copy the below code paste below to it

<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'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</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>
<div style='height:5px;clear:both;'/>

After successful pasting the codes, "Save your blogger template".
Go to Page elements section and you can find Tabbed widgets as show in the below image

According to your requirement change necessary modifications and Adjust the widget to Multi Tabbed widgets.

Appreciation:-

If you enjoyed this post let know your views via comments. If you feel any difficult in pasting the above code bring to us we try for you.
Subscribing to BlogTariff is a brilliant idea for not missing ensuing topics. Don't miss to subscribe and get our regular update via Email.