CLASSIFICACAO DO TUTORIALAVANCADOPesquisando na net aprendi a fazer este menu em abas que esta instalado aqui no Templates, da imagem ao lado, mais facil para quem tem menos experiencia com os codigos e mais editavel.Principais Vantagens: Neste menu voce pode aumentar ou diminuir o numero de abas e ate criar outro menu abaixo; Simples e facil de ser adicionado em seu template.Aprendi a fazer este menu neste site: BarelyFitz DesignsO codigo javascript e opensource.Nao Se Esqueca: Essas configuracoes demandam algum conhecimento em codigos HTML e CSS. Portanto: SEMPRE TENTE ANTES NUM BLOG DE TESTES. SALVE O SEU TEMPLATE ANTES DE COMECAR, CLICANDO EM Baixar modelo completo. Leia o tutorial ate o fim e tenha certeza de ter entendido.Obs: Estou utilizando como base o Template: Minima, Designer: Douglas Bowman que e disponibilizado pelo blogger. Este post foi publicado a 1a vez em Abril/2008 e esta sendo Republicado com varias modificacoes na intencao de melhorar o aprendizado.Vamos ao Hack:Clique em Layout Editar HTML.1o Passo Voce vai criar uma nova widget/gadget para seu menu em abas.1o - Adicione o codigo CSS no HTML do seu template abaixo do codigo da #sidebar-wrapper(coluna lateral). O codigo em vermelho e o que vai ser adicionado.Ficara desta forma:#sidebar-wrapper {width: 220px;float: $endSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/}#tabsidebar-wrapper{width: 220px;/*Defina a largura do seu widget*/margin:30px 0px 5px 0px;border: 1px none $bordercolor;float:right;}OBS: margin Margens Siga o raciocinio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template. float Aqui voce define qual o lado seu menu vai flutuar: right-direita, left-esquerda.2o - Acima da tag cole o codigo: Clique em VISUALIZAR para se certificar que esta indo tudo certo.2o Passo Copie o codigo CSS do menu e cole acima da linha ]]>(Use Ctrl+F para encontrar esta linha):/*--------Tabber ---------------------------------*/.tabberlive .tabbertabhide { display:none; }.tabberlive {margin-top:8px;}/*------------ Tabernav=Navegacao -------------------*/ul.tabbernav{ margin:0;padding: 6px 0;border-bottom: 1px solid $bordercolor;/*Variavel bordercolor pode ser alterada por um codigo de cor*/font: bold 12px Verdana, sans-serif;padding:6px 0; }ul.tabbernav li{ list-style: none; margin: 0; display: inline; }/*--- Abas Inativas ---*/ul.tabbernav li a{padding: 6px 0.5em;margin-left:3px;border: 1px solid $bordercolor;border-bottom: none;background:#D5DFE8; /*Cor do fundo das abas inativas*/text-decoration: none; }ul.tabbernav li a:link { color: #333; } /*Cor do texto das abas inativas*/ul.tabbernav li a:visited { color: #667; }ul.tabbernav li a:hover{ color:#B30000; /*Cor do texto coloca o mouse sobre a aba*/background: #dedede; /*Cor do fundo quando coloca o mouse sobre a aba*/border-color: #dedede;}/*--- Abas Ativas ---*/ul.tabbernav li.tabberactive a{background-color: #fff; /*Cor do fundo da aba ativa Deve ser igual a cor do conteudo da aba*/color:#B30000; /*Cor das letras da aba ativa*/border-bottom: 1px solid #fff; /*Deve ser igual a cor do conteudo da aba*/}ul.tabbernav li.tabberactive a:hover {color: $linkcolor; /*Cor do texto coloca o mouse sobre a aba*/background: white; /*Cor do fundo coloca o mouse sobre a aba*/border-bottom: 1px solid white;}/*------ Tabbertab = Conteudo da Tab/Abaixo das Abas -----------*/.tabberlive .tabbertab {background:#fff; /*Cor do fundo abaixo Deve ser igual ao da aba ativa*/padding:5px;border:1px solid $bordercolor;border-top:0; font-size:100%;}.tabbertab ul {list-style:none;margin:0 0 0;padding:0 0 0 0px;}/*----- Links Internos -----*/.tabbertab ul li{/*Estilo para os links*/background:url("http://i8.tinypic.com/6lip3c7.gif")