Also Read...
Also Read...

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'>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.
//<![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>
<div class='bsd-tab-area'>Customization :
<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>
- Change Trending, Category,Archive with your desired tabs name.
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
Post a Comment Blogger Disqus
0 Comments on "How To Install Multi-Tab Widget In Blogger Sidebar" So Far - Post Yours!
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