Saiba como se faz:... "Menu em abas deslizante na sidebar com JQuery" ..." tutorial ......aprender a instalar um menu em abas com efeito deslizante na sidebar, com JQuery."" Com este menu voce pode aproveitar melhor o espaco dos elementos na sua sidebar."" Ele funciona a base de um javascript e possui um efeito deslizante bem bonito ao fechar uma aba e abrir a seguinte. Ele e simples e facil de instalar, e o que e melhor, e bem leve!Para visualizar o menu, clique no link para ver a Demonstracao do menu em abas deslizantePara este menu, voce nao precisa se preocupar em hospedar o arquivo javascript, pois iremos utilizar um arquivo que faz parte da biblioteca Google API.Entao vamos a instalacao!1o passo: Definir os estilos para o seu menu em abas:Va em " design" >> " Editar HTML", (nao precisa clicar em 'Expandir modelos de widgets'), e cole o seguinte codigo logo ACIMA da tag ]]></b:skin>/*--- Menu em Abas ---*/.widgets{float:left;margin:1px 0 10px 1px;width:auto;}ul.tabnav{margin:0;padding:0;width:auto;text-align:center;}/*--- Titulos das Abas ---*/.tabnav li{ /* estilos para os titulos da lista */display:inline;float:left;list-style:none;margin:0 2px;padding:2px 10px 20px 10px;border:1px solid #fff; /* edite cor da borda */background:#0066CC; /* edite cor de fundo */}.tabnav li a{ /* estilos para titulos ativos */color:#fff; /* edite cor do texto */display:block;font-size:95%;font-family:Arial, Tahoma, Verdana;font-weight:bold;margin:2px 0 0 2px;outline:none;padding:2px 3px 1px 3px;text-transform:uppercase;}/*--- Abas Ativas ---*/.tabnav li a:hover, /* estilos para os links hover e aba ativa */.tabnav li a:active,.tabnav li.ui-tabs-selected a{background:#0066CC; /* edite cor de fundo */color:#fff; /* edite cor do texto */text-decoration:none;}/*--- Container com os Widgets ---*/.tabdiv{background:#000; /* edite cor de fundo */border:1px solid #fff; /* edite cor da borda */padding:5px 0 0 5px}.tabdiv h2{display:none}.tabdiv ul{list-style:none;padding:5px 0px}/*----- Links Internos -----*/.tabdiv li{ /* estilos para os links dos widgets */border-bottom:1px dashed #fff; /* edite cor da borda */line-height:1.35em;margin:2px 0 2px 0;padding:0 0 4px 10px}.tabdiv li a:link,.tabdiv li a:visited{overflow: hidden}.tabdiv li a:hover {text-decoration:none}.ui-tabs-hide{display:none}2o passo: Adicionar o arquivo Javascript para funcionamento do menu:Cole o seguinte codigo logo ABAIXO da tag ]]></b:skin><!-- JavaScript JQuery Menu em Abas --><script src='http://www.google.com/jsapi'/><script>google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);</script><script type='text/javascript'>//<![CDATA[// <!-- Tab Sidebar -->$(document).ready(function() {$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });});//]]></script><!-- Fim JavaScript JQuery Menu em Abas -->" Salve as modificacoes, porem ainda nao sera possivel visualizar seu menu em abas, pois ainda sera preciso inclui-lo no seu html.Vamos ao proximo passo."3o passo: Incluir o menu em abas no html do template:Mantenha desmarcada a opcao: ' Expandir modelos de widgets'.Importante: Se voce quiser que seu menu em abas fique no TOPO da sidebar, siga as orientacoes a seguir:Procure pelo trecho:<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'>E cole este codigo a seguir, logo abaixo de <div id='sidebar-wrapper'><div class='widgets' id='tab-sidebar'><ul class='tabnav'><!-- ALTERE AQUI OS TITULOS DO SEU MENU EM ABAS --><li class='tab1'><a href='#tab1'>Perfil</a></li><li class='tab2'><a href='#tab2'>Arquivo</a></li><li class='tab3'><a href='#tab3'>Blogroll</a></li></ul><div class='clear'/><div class='tabdiv' id='tab1'><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'></b:section> <!-- /end sidebar-tabs-1 --></div> <!-- /end tab1 --><div class='tabdiv' id='tab2'><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'></b:section> <!-- /end sidebar-tabs-2 --></div> <!-- /end tab2 --><div class='tabdiv' id='tab3'><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'></b:section> <!-- /end sidebar-tabs-3 --></div> <!-- /end tab3 --></div> <!-- /end tab-sidebar -->Altere os titulos de cada aba se preferir, os campos estao destacados no codigo para facilitar a identificacao. Importante: para