How To Install Multi-Tab Widget In Blogger Sidebar

How To Install add Multi-Tab Widget gadget In Blogger Sidebar
Hello Folks, Today in this article we are going to explain How to Add Multi Tab Widget In Blogger Sidebar.Multi tab gadget tool is very useful to add in blogger template,because after installing multi tab plugin you can display popular post, features post, recent comments blogger or disqus and any content you would like to display in short precise space to your readers.We have used CSS for styling the multi tab widget and HTML.However now days blogspot custom templates comes with sidebar multi tab widget but some sidebar gadget have very simple features.Adding multi tab widget in blogger sidebar will also suits website niche.In order to grab this widget follow the steps mentioned below.
DEMO:

See the Pen How to Add Multi Tab Widget In Blogger Sidebar by BloggersStand (@bloggersstand) on CodePen.

How to Install Multi Tab Widget In Blogger Template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD+F.

Step 4. Now Copy the below CSS code and paste it just above/before </style> or ]]></b:skin>.


/* MultiTab Sidebar Widget By www.BloggersStanD.com */

.bsd-tab-area {
  display: inline-block;
  text-transform: uppercase;
  width: 100%;
}

.bsd-tab-area p {
  display: inline-block;
  background: #fff;
  text-transform: lowercase;
  font-size: 14px;
  padding: 20px;
  margin: 0;
}

.bsdmultitab-gadget {
  list-style: none;
  margin: 0 0 10px;
  padding: 0
}

.bsdmultitab-gadget li {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left
}

.bsdmultitab-gadget li a {
  background: #8ED557;
  color: #fff;
  display: block;
  padding: 15px;
  font-size: 12px;
  text-decoration: none
}

.multitabs-bsd {
  width: 33.3%;
  text-align: center
}

.bsd-tab-area h2,
.bsd-tab-area h3,
.bsd-tab-area h4,
.bsd-tab-area h5,
.bsd-tab-area h6 {
  display: none;
}

.bsdmultitab-gadget li a.bsdmultitab-gadget-current {
  padding-bottom: 20px;
  margin-top: -8px;
  background: #fff;
  color: #333;
  text-decoration: none;
  border-top: 3px solid #8ED557;
  font-size: 13px;
  text-transform: uppercase
}

Step 5. Now search for </body> tag and copy the below java script and paste it just above/before </body> tag.
<script type='text/javascript'>
//<![CDATA[
// Multitabs Sidebar by www.BloggersStanD.com
jQuery(document).ready(function($){ $(".bsdmultitab-gadget-content-widget-id").hide(); $("ul.bsdmultitab-gadget-content-tabs-id li:first a").addClass("bsdmultitab-gadget-current").show(); $(".bsdmultitab-gadget-content-widget-id:first").show(); $("ul.bsdmultitab-gadget-content-tabs-id li a").click(function() { $("ul.bsdmultitab-gadget-content-tabs-id li a").removeClass("bsdmultitab-gadget-current a"); $(this).addClass("bsdmultitab-gadget-current"); $(".bsdmultitab-gadget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
Step 6. Now search for  <div id='sidebar-wrapper'> and copy the below HTML code and paste it below/after <div id='sidebar-wrapper'>. If not working paste above it.
<div class='bsd-tab-area'>
<ul class='bsdmultitab-gadget bsdmultitab-gadget-content-tabs-id'>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id1'>Trending</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id2'>Category</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
Customization :
  • Change Trending, Category,Archive with your desired tabs name. 
Step 6. Now Save your Template..Done !