How to Add Multi Tabbed Widget in Sidebar

Bloggers kept searching for different advanced widgets to add on their website. If choosing a template you'll not have to worry, if 3 tabbed widget is there or not. You can easily place it on any template by following given steps.

This is one of the coolest widget, loads of files can be placed in one cupboard. Very short coding if considering the mega output. So many functions in this tiny 3 tabbed widget. It will make it more convenient for any visitor to access more of your post in clicks.

Adding Multi tabbed widget to your blog

1. Copy below code before </head>

JAVASCRIPT

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// Multi tab  
jQuery(document).ready(function($){ 
$(".laimed").hide(); 
$("ul.blake li:first a").addClass("pointz").show(); $(".laimed:first").show(); $("ul.blake li a").click(function() { $("ul.blake li a").removeClass("pointz a"); $(this).addClass("pointz"); $(".laimed").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn();return false; }); });
</script>

2. Search for ]]></b:skin>  and paste below css code above it.

CSS

 /* Multi tab css setting */
.multitabs{text-transform:uppercase; margin:0 0px 30px; }
.kidder{list-style:none;margin:0 0 7px;padding:0; background: #f8f8f8; border-bottom:3px solid #2E9DD4; height:38px;}
.kidder li{list-style:none;padding:0;margin:0;float:left;}
.kidder li a{ display:block;padding:8px 14px;font-size:12px; font-weight:bold; text-decoration:none; color:#777}
.multitabs h2 {display:none;}
.kidder li a.pointz, .kidder li a:hover{background:#2E9DD4; color:#fff !important;text-decoration:none;}
.laimed li{border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:10px 3px !important; margin:0 !important; text-transform:none;}
.laimed li { background:none; list-style:none;}
.laimed img {width:65px;height:60px;float:left; padding:0px; margin:0 6px 0px 0;}
.PopularPosts .item-thumbnail{margin:0px;}

3. Search for sidebar-wrapper and paste this html code below it. And done!

HTML

<div class='multitabs'>
<ul class='kidder blake'>
<li class='beez'><a href='#id1'>Popular</a></li>
<li class='beez'><a href='#id2'>Recent</a></li>
<li class='beez'><a href='#id3'>Comments</a></li>
</ul>
<div class='clear'/>
<!-- Tab Widget 1 -->
<div class='laimed' id='id1'>
<b:section class='sidebar' id='sidebaze1' preferred='yes'/>  
</div>

<!-- Tab Widget 2 -->
<div class='laimed' id='id2'>
<b:section class='sidebar' id='sidebaze2' preferred='yes'/>
</div>

<!-- Tab Widget 3 -->
<div class='laimed' id='id3'>
<b:section class='sidebar' id='sidebaze3' preferred='yes'/> 
</div>
</div>
<div class='clear'/>

blog.enikz