How to create a sidebar multi tab in your Blogspot.

Sidebar  Multi Tab

Hi  everybody, How are you? Do you need Six Tab sidebar widget ? You can keep six Tab or three Tab, as your wish and you can change color also. So, just follow some steps. 

1st Step:

Template>> Edit HTML>> Proceed.

Find [by pressing Ctrl + F] this code in the template. 
Search </b:skin> and add this code above it.

/* ----------------------Julfiker Sidebar Tab Start---------------------- */

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 2px solid #f34246;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 2px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 2px;
padding-left: 2px;
font-size: 11px;
padding-top: 6px;
padding-bottom: 6px;
text-decoration: none;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 2px;
margin-bottom: 2px;
}
.tags_tab {
width: 84px;
text-align: center;
}
.about_tab {
width: 84px;
text-align: center;
}
li.laster {
border: 0px;
width: 84px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 2px;
padding-left: 2px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 5px;
margin-top: -5px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 11px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

/* ----------------------Julfiker Sidebar Tab End---------------------- */

2nd Step:

Copy and paste this code where you want ....


<!-- Tab Widget [start] [obhooy.com Red Sidebartab] -->
<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 class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>Obhoy</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>One</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id3'>Two</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id4'>Three</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id5'>Four</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id6'>Five</a></li>
</ul>
<!-- Tab Widget 1 -->
<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'/>                                  
</div>
                     
<!-- Tab Widget 2 -->            
<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'/>                                    
</div>                        

<!-- Tab Widget 3 -->                           
<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'/>                                    
</div>

<!-- Tab Widget 4 -->
<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'/>                                    
</div>

<!-- Tab Widget 5 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id5'>
<b:section class='sidebar' id='sidebartab5' preferred='yes'/>                                    
</div>

<!-- Tab Widget 6 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id6'>
<b:section class='sidebar' id='sidebartab6' preferred='yes'/>                                    
</div>

</div>
<!-- Tab Widget [endt] [obhooy.com Red Sidebartab] -->

3rd Step:

I hope you have done this job. Now just save & see your Sidebar Multi Tab in blog Spot layout.

Note: Julfiker is my name. You can change that name.