28 de dez. de 2010

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

5 comentários:

  1. olá gostei muiro deste tutorial e queria aplicar ao meu blog
    mas na hora da edição não aparece o tal do "div id='sidebar-wrapper'"
    por isso não posso conxluir a instalção das abas, o que posso fazer ?

    ResponderExcluir
  2. No meu blog fica tudo desconfigurado, fica feio... além que tive q mudar umas coisas, pq não aceitava na hora de salvar.=/

    ResponderExcluir
  3. poww..ta ficando do lado esquerdo ao inves do direito...pq isso? me ajuda :)
    quero do lado direito...só trocar o left por right? ou mais alguma coisa?
    abraços

    ResponderExcluir
  4. consegui colocar pro lado direito
    mais agora n to conseguindo configurar ;/
    os "links" ;/
    ta mt complicado
    e tb qnd abro o site aparecem todos topicos do menu um em baixo do outro depois que fica direito
    pq isso?

    ResponderExcluir
  5. gostaria de saber em qual modelo do novo blog é aplicavel este menu. grata
    theabs.com.br

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube