Menu em Abas com JQuery

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Vou ensinar como colocar em seu blog um menu muito bonito, simples e fácil de instalar.


Para visualizar este menu clique neste link:

Site de Demonstração


Clique em Modelo ► Editar HTML

1º Passo:

» Instalar o CSS no seu template.

Cole o código abaixo acima da tag ]]></b:skin>

/*---- Tabbed Sidebar Widgets ---- */
.widget-wrapper2 { border: 1px solid #494e52;
                   background-color: #636d76;
                   padding: 8px; }
.widget-tab { -webkit-border-bottom-right-radius: 5px;
              -webkit-border-bottom-left-radius: 5px;
              -moz-border-radius-bottomright: 5px;
              -moz-border-radius-bottomleft: 5px;
              border-bottom-right-radius: 5px;
              border-bottom-left-radius: 5px;
              background: #FFFFFF url(http://i37.tinypic.com/28iq9fm.gif) repeat-x scroll left bottom !important; /*img-tabcontentbg*/
              border: 1px solid #CFCFCF;
              font-family: Arial,Helvetica,sans-serif;
              padding: 15px !important; }
.widget-tab  ul { margin: 0px;
                  padding: 0px 20px 0px 20px; }
.widget-tab  ul li { list-style: none;
                     border-bottom: 1px solid #d6dde0;
                     padding-top: 10px;
                     padding-bottom: 10px;
                     font-size: 13px; }
.widget-tab  ul li:last-child { border-bottom: none }
.widget-tab  ul li a { text-decoration: none;
                       color: #3e4346; }
.widget-tab  ul li a small { color: #8b959c;
                             font-size: 9px;
                             text-transform: uppercase;
                             font-family: Verdana, Arial, Helvetica, sans-serif;
                             position: relative;
                             left: 4px;
                             top: 0px; }
.tab-content  ul li a:hover { color: #a59c83 }
.tab-content  ul li a:hover small { color: #baae8e }
.active-tab { background: #FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
              border-color: #CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
              border-style: solid !important;
              border-width: 1px 1px 2px !important;
              color: #282E32 !important; }
ul.tab-wrapper { margin: 0px;
                 padding: 0px;
                 margin-top: 5px;
                 margin-bottom: 6px; }
ul.tab-wrapper li { -webkit-border-top-left-radius: 5px;
                    -webkit-border-top-right-radius: 5px;
                    -moz-border-radius-topleft: 5px;
                    -moz-border-radius-topright: 5px;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    background: #191919 url(http://i34.tinypic.com/sf83a1.gif) repeat-x scroll left top; /*img-tabinactivebg*/
                    border: 1px solid #464C54;
                    color: #FFFFFF;
                    cursor: pointer;
                    display: inline;
                    font-family: Verdana,Arial,Helvetica,sans-serif;
                    font-size: 9px;
                    font-weight: bold;
                    line-height: 2em;
                    list-style-image: none !important;
                    list-style-position: outside !important;
                    list-style-type: none !important;
                    margin-right: 1px;
                    padding: 8px 14px;
                    text-align: center;
                    text-decoration: none;
                    text-transform: uppercase; }
ul.tab-wrapper li:hover { background: #FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
                          border-color: #CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
                          border-style: solid !important;
                          border-width: 1px 1px 2px !important;
                          color: #282E32 !important; }

Imagens:

Tabcontentbg -   Tabtopbg -   Tabinactivebg -   Tabinactivebg - (Sugestão)

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

♦ Clique em Salvar modelo.

2º Passo

» Instalar o JQuery e o Script em seu blog.

Cole abaixo da tag </head> o código ▼:

<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar"; 
</script> 
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
<!-- Fim JavaScript Menu em Abas JQuery-->

Observações Importantes

1ª - Você  pode também baixar o arquivo JavaScript: Bloggertabv  » Salvá-lo em seu computador » Hospedar num site de sua preferência e substituir o endereço http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js acima pelo seu endereço hospedado.
Veja como hospedar no Google Code» How to host javascript files in Google Code Hosting ?

2ª - Ou pode hospedar o javascript no seu blog.
Aí ao invés de você colar o código anterior você vai colar este aqui ▼abaixo da tag </head>:

<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar"; 
</script> 
<script type='text/javascript'>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});
//]]>
</script>
<!-- Fim JavaScript Menu em Abas JQuery-->

♦ Clique em Salvar modelo.

♦Clique em Visualizar→ Se o seu menu não aparecer não se preocupe. Aprenda como configurar para que ele apareça corretamente.

Configure o seu menu em abas para que apareça corretamente.

Para isso entenda alguns pontos importantes

Veja as variáveis:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

» starttab e endtab → São as variáveis que indicam a quantidade de abas do seu menu.
Por exemplo:

• starttab=0 e endtab=2 Significa que seu menu vai de 0 a 2 ► Terá 3 abas a nº 0, nº 1 e nº 2.
• Se você quiser que o seu menu tenha 4 abas mude o endtab=2 para endtab=3

» sidebarname="sidebar" → Esta variável indica onde o seu menu vai ficar.
Por exemplo:

• Se você quer que ele fique na sidebar do seu blog coloque o nome da id='sidebar'.
• Se você quer que ele fique na outra sidebar do seu blog coloque o nome da id='newsidebar'.(Este exemplo se refere ao template de demonstração, cuja outra sidebar tem o nome 'newsidebar')
  

Se você manteve o nº2 para a variável endtab. Observe que os 3 primeiros gadjets da sua sidebar ficarão contidos no menu em abas automaticamente, o próximo ficará abaixo do menu.
No site de Demonstração coloquei apenas os 2 primeiros gadgets nas abas » Veja: Demonstração do Menu em Abas JQuery

Saiba onde colocar seu menu:

Veja o HTML abaixo, ele indica a disposição da 1ª Coluna (sidebar-wrapper), 2ªColuna (main-wrapper) e 3ªColuna (newsidebar-wrapper).

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Recentes' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'/>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>

» Para que o seu menu fique nas colunas laterais apenas coloque var sidebarname="nome da id da sidebar"; .
• Que neste caso será da id='sidebar' ou id='newsidebar'.
• Para o seu blog: encontre o nome da id da coluna do seu blog e substitua.
Exemplo do Demoplate:
var sidebarname="sidebar" (1ªColuna) ou var sidebarname="newsidebar" (3ªColuna).

» Mas, se você quiser colocar o menu em cima dos posts como eu coloquei aqui. Crie uma nova section em cima da 2ªColuna:

Como?

Muito simples.
1º  Você vai acrescentar a linha verde no local indicado abaixo ficando desta forma:

<div id='main-wrapper'>
<b:section class='main' id='main1' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

2º Em var sidebarname="sidebar"; você irá substituir a palavra sidebar por main1assim: var sidebarname="main1";

3º Coloque as gadgets que desejar na section main1 criada que seu menu em abas aparecerá automaticamente.

♦ Se você clicar em Visualizarseu menu NÃO irá aparecer.

♦ Para que você visualize-o precisará clicar em Salvar modelo.

E aí sim clicar em Visualizar

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Fonte: Tradução e Adaptação do Tutorial: Easiest Way to Make Tabbed Sidebar for Blogger

Post Atualizado em 04/11/2012

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.

Observação: Este hack se aplica aos templates da plataforma Blogger 2006. Ainda não testei nos templates do Blogger a partir de 2010. Assim que testar e conseguir fazer funcionar prometo postar aqui no TPV.