Saiba como é feito:..."» Menu em abas para widget no Blogger"
Autor: Edilene brandao da silva | Publicado: 2010-12-28T14:44:00-08:00

&nbsp;fonte e créditos:http://templateseacessorios.blogspot.com/2010/12/menu-em-abas-para-widget-no-blogger.html
&nbsp;» Menu em abas para widget no Blogger    
Outra forma de instalar o menu em abas em seu Blogger.


  &nbsp;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:
]]&gt;&lt;/b:skin&gt; 

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


]]&gt;&lt;/b:skin&gt;
&lt;!-- tabs --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[jQuery(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // UL = .wooTabs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Tab contents = .inside&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tag_cloud_class = '#tagcloud'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Fix for tag clouds - unexpected height before .hide() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tag_cloud_height = jQuery('#tagcloud').height();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.wooTabs').each(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.inside &gt; *').hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.inside &gt; *:first-child').show();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value&nbsp;&nbsp;&nbsp; jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery(this).addClass('selected');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery(this).parent().parent().parent().children('.inside').children('*').hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clicked_tab_ref_height = tag_cloud_height + 20;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else // Other height calculations&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; */&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //jQuery('.inside').stop().animate({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;&nbsp;&nbsp; height: clicked_tab_ref_height&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // },400,"linear",function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Callback after new tab content's height animation&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.inside ' + clicked_tab_ref).fadeIn(500);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // })&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evt.preventDefault();})&nbsp;&nbsp;&nbsp; })//]]&gt;&lt;/script&gt;&nbsp;

Agora acima de:

&nbsp;&lt;div id='sidebar-wrapper'&gt;

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)
   &lt;div id='tabs'&gt;
&lt;ul class='wooTabs tabs'&gt;
&lt;li&gt;&lt;a href='#pop'&gt;Popular &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#perfil'&gt;Perfil &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#feed'&gt;Feed &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#marcadores'&gt;Marcadores &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#seguidores'&gt;Seguir &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&nbsp;&nbsp; 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&lt;div class='fix'/&gt;
&lt;div class='inside'&gt;

&lt;div id='pop'&gt;
&lt;b:section class='pop' id='pop' maxwidgets='1'&gt;
&lt;b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/&gt;
&lt;/b:section&gt;&lt;/div&gt;

&lt;div id='perfil'&gt;
&lt;b:section class='perfil' id='perfil' maxwidgets='1'&gt;
&lt;b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/&gt;
&lt;/b:section&gt;&lt;/div&gt;

&lt;div id='feed'&gt;&nbsp; 
&lt;b:section class='feed' id='feed' maxwidgets='1'&gt;
&lt;b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/&gt;
&lt;/b:section&gt;&lt;/div&gt;

&lt;div id='marcadores'&gt;
&lt;b:section class='marcadores' id='marcadores' maxwidgets='1'&gt;
&lt;b:widget id='Label1' locked='true' title='Labels' type='Label'/&gt;
&lt;/b:section&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&lt;div id='seguidores'&gt;
&lt;b:section class='seguidores' id='seguidores' maxwidgets='1'&gt;
&lt;b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/&gt;
&lt;/b:section&gt;
&lt;/div&gt;

&lt;/div&gt;&lt;/div&gt;
&lt;div class='fix' style='height:15px !important;'/&gt;
&lt;!-- TABS END --&gt; 


você está em:
http://lllmenu.blogspot.com