Como criar um menu multi abas na lateral do blog

Views:
(cole antes de </head>)

<style type='text/css'>
.multitab-section{
background:#fff;
text-transform:none;
width:100%}
.multitab-widget{
list-style:none;margin:0 0 10px;padding:0}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a{
margin:-2px;
font-size:13px;
font-weight:400;
text-transform:uppercase;
line-height:40px;
width:32.3%;
list-style:none;
text-align:center;
display:inline-block;
padding:5px 0;
background:#222222;
color:#fff;
cursor:pointer;
position:relative;
transition:all .3s;
overflow: hidden;}
.multitab-widget li a.multitab-widget-current{background: #ff84a6;}
</style>


CÓDIGO JAVASCRIPT:
(cole acima de </body>)

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>


CÓDIGO HTML:
(cole abaixo de </aside> conforme explico no tutorial)

<div class='multitab-section'>
  <ul class='multitab-widget multitab-widget-content-tabs-id'>
    <li class='multitab-tab'>
      <a href='#multitab-column-id1' title='Popular' class='multitab-widget-current'><span>Popular</span></a>
      <a href='#multitab-column-id2' title='Labels'><span>Tags</span></a>
      <a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>
    </li>
  </ul>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>
    <b:section class='sidebar' id='multitab-sidebar1' preferred='yes' />
  </div>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>
    <b:section class='sidebar' id='multitab-sidebar2' preferred='yes' />
  </div>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>
    <b:section class='sidebar' id='multitab-sidebar3' preferred='yes' />
  </div>
</div>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage