How To Install Multi-Tab Widget In Blogger Sidebar

0
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:

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 !
learn trick to add install create sidebar mutli tab multi tabbed navigation widget gadget tool plugin for blogspot website.adding Sidebar mutli column tabs section in blogger template
Hello Folks, Today in this article we are going to explain How to Add Multi Tab Widget In Blogg...
SUMMARY

learn trick to add install create sidebar mutli tab multi tabbed navigation widget gadget tool plugin for blogspot website.adding Sidebar mutli column tabs section in blogger template

You Might Also Like:

We hope this article helped you to learn How To Install Multi-Tab Widget In Blogger Sidebar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Install Multi-Tab Widget In Blogger Sidebar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand