cole o código:



♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
2º Passo
» Copie o código 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=Navegação -------------------*/
ul.tabbernav{ margin:0;
padding: 6px 0;
border-bottom: 1px solid $bordercolor;/*Variável bordercolor pode ser alterada por um código 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 conteúdo da aba*/
color:#B30000; /*Cor das letras da aba ativa*/
border-bottom: 1px solid #fff; /*Deve ser igual a cor do conteúdo 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 = Conteúdo 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") no-repeat; /*Seta para os links*/
background-position:0 5px;
border-bottom:1px dotted #B30000;/*Cor da borda inferior dos links*/
text-indent:10px;
color:$linkcolor;/*Cor do link*/
list-style:none; margin:0; padding:2px 0 3px 2px;
}
/*-----Tabberlive-----*/
.tabberlive .tabbertab h2,.tabberlive .tabbertab h3{display:none;}
.tabberlive#tab1 .tabbertab,.tabberlive#tab2 .tabbertab{height:;overflow:auto;}

» Este código vai definir a aparência do seu menu. Por exemplo se você quer que o fundo das abas inativas fiquem cinza ou azuis, tamanho do menu, etc.
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.
3º Passo
» Copie o código Javascript abaixo e cole acima da tag :



♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.
4º Passo
» Agora você vai colocar o código HTML e fazer funcionar seu menu em abas.Acrescente o código no local que deseja no seu blog.

* Por exemplo: Se você quer que fique acima da sidebar (coluna lateral) do seu blog deve ser colocado acima do código correspondente ao da sidebar →


♦ Se você quiser acrescentar mais abas repita o código:


♦ Não se esqueça de alterar # por um número que não se repita.
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.