Menu em abas para widget no Blogger

Outra forma de instalar o menu em abas em seu Blogger.

 DEMO

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Vá até o HTML de seu blog e troque:

]]></b:skin>

pelo código abaixo(ajuste a largura indicado na cor vermelha)

/* Tabs
----------------------------------------------- */
#tabs {
    width: 370px !important;
    height: auto !important;
        margin: 2px 0px 6px 8px;
    padding: 5px 9px 5px -2px;
    border: 1px solid #ddd;
    float: left;
    display: block;
    background: #eee;
}
#tabs h2 {
    display: none;
}
.inside {
    width: 348px !important;
    padding: 5px 5px 10px 5px!important;
    border: 1px solid #ddd !important;
    margin: 5px 4px 10px !important;
    background: #FFF;
}
ul.wooTabs {
    width: 100%;
    padding: 0 0 20px 6px;
}
ul.wooTabs li {
    float: left;
    display: inline;
    font-size: 11px;
    line-height: 14px;
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
    font-weight: bold;
    margin: 0 2px 0 0px !important;
    cursor: pointer;
}
ul.wooTabs li a {
    line-height: 31px;
    color: #000 !important;
    display: block;
    float: left;
    padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
    text-decoration: none;
    color: #fff !important;
    background: #C00;
}
#tagcloud {
    padding: 10px;
}
#sub img {
    float: right;
    margin: 0 0 8px 8px;
}
.inside li {
    background: ;
    border-bottom: 1px solid #EEE;
    padding: 8px 0 0 2px;
    margin: 0 0 0 -30px;
        list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
    border: 1px solid #ddd;
    padding: 3px;
    float: left;
    margin: 0 8px 0 0;
    background: #fff;
}


]]></b:skin>

<!-- tabs -->          
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

        // UL = .wooTabs
        // Tab contents = .inside
      
       var tag_cloud_class = '#tagcloud';
      
              //Fix for tag clouds - unexpected height before .hide()
            var tag_cloud_height = jQuery('#tagcloud').height();

       jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
       jQuery('.wooTabs').each(function(){
           jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
       });
       jQuery('.inside > *').hide();
       jQuery('.inside > *:first-child').show();
       jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
        var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value    jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
            jQuery(this).addClass('selected');
            jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
           
            /*
            if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
            {
                clicked_tab_ref_height = tag_cloud_height + 20;
            }
            else // Other height calculations
            {
                clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
            }
            */
             //jQuery('.inside').stop().animate({
            //    height: clicked_tab_ref_height
            // },400,"linear",function(){
                    //Callback after new tab content's height animation
                    jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
            // })
            
             evt.preventDefault();
})
    })
//]]>
</script>

 

Agora acima de:

 <div id='sidebar-wrapper'>

Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)

<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>  
      
<div class='fix'/>
<div class='inside'>

<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>

<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>

<div id='feed'> 
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>

<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
       
<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>

</div></div>
<div class='fix' style='height:15px !important;'/>
<!-- TABS END -->