Menu em abas no Blogspot + Template

Este tutorial é um dos mais pedidos depois do lançamento do novo template compulsivo. Como já disse em comentários e no Grupo de Discussão Blogspot Brasil, me baseei no tutorial que está no Templates para Você, que usa o JavaScript criado por BarelyFitz Designs para exibir um menu em abas no Blogspot.

Este não é um tutorial de difícil implementação, mas antes de começar vamos aos avisos paroquiais:

• Tente antes num blogue de testes;
• Faça um backup do seu template antes de começar;
• Leia o tutorial até o fim e tenha certeza de ter entendido, copiar e colar sem pensar não dá certo!

Baixe este arquivo, hospede no local de sua preferência e anote a URL. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente:

<!-- JavaScript Menu em Abas -->
<script src='http://URL_DO_ARQUIVO/tabber.js' type='text/javascript'/>

Depois, adicione o seguinte trecho de código CSS ao seu template. Um local apropriado seria logo após o trecho referente a barra lateral, antes da linha /* Profile. Não esqueça de adequar o valor destacado em vermelho para bater com a largura da sua barra lateral:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

Agora vamos adicionar o trecho de código HTML para incluir os elementos no menu em abas. Cole o código abaixo antes da linha <div id='sidebar-wrapper'>:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

A configuração básica está pronta, visualize para certificar-se que está tudo certo e então salve.

Agora é só adicionar um elemento de página (ou Gadget) para cada uma das abas através do painel de controle do Blogger, clicando nos números correspondentes, conforme a imagem abaixo:

Se você preferir pode fazer o download do template Mínima Padrão do Blogger, com a customização compulsiva para o menu em abas já aplicada. Não retire os créditos!

Mínima Compulsivo Menu em Abas
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)

Imagem topo: Johnson & Johnson