Menu em Abas com JQuery




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.
Menu em Abas com JQuery Menu em Abas com JQuery Reviewed by Aurea on 11/04/2012 Rating: 5

17 comentários:

  1. Muito bom!
    No outro tutorial que você ensinou a fazer eu não consegui, quem sabe agora, dê certo!

    Grande abraço, bjus!

    ResponderExcluir
  2. O valeu mesmo mano agora meu blog ta com um menu legal. Agradecido mesmo, e continue com seu otimo trabalho.

    ResponderExcluir
  3. Tem como colocar dos 2 lados ? tipo uso de um lado do blog e do outro lado tbm...
    obrigado..

    ResponderExcluir
  4. @Equipe EEMAK Vi que vocês ainda não testaram. Espero que dê certo.

    @Filipe Que bom que você gostou e seu blog ficou legal.

    @Eddy Já tentei colocar 2 no blog de teste e não deu. Ainda não sei se dá.

    ResponderExcluir
  5. Muito bom o código, funcionou perfeitamente no meu blog de testes... mas antes de colocar no endereço "oficial" preciso saber o seguinte: é possível publicar gadgets acima deste menu em abas? Como faço isso? Essa função em abas precisa ficar abaixo de outras ferramentas que não estarão dentro das abas. Agradeço.

    ResponderExcluir
  6. oi muito bom essse tuto mas não entedi a parte no qual não posso visualizar e aparecerar mais tarde com tempo e com post que colocarar.
    ja ta tudo no lugar eu colouqei no main1 (uma nova seção ) mas nau vejo nada de difenrente

    ResponderExcluir
  7. Olá, estou criando um blog pra mim,então estou enfrentando alguns obstáculos. Eu alterei a URL do meu blog e aí quando clicava nas páginas (linkbar) que havia criado aparecia a mensagem: O blog que você estava procurando não foi encontrado. Excluí as páginas e as criei novamente e deu certo. Porém para página "Início"que é default do blog não funcionou. Ela não aparece para que eu delete-a e a crie novamente. Ao tentar acessá-la recebo a mensagem acima e no url aparece o endereço antigo. Você pode me ajudar? Não sei a quem recorrer. Já pedi ajuda ao Blogger mas não tenho resposta.Obrigada
    Fui na guia Layout > Editar HTML e procurei o nome antigo do meu blog para alterá-lo para o link do novo blog, porém já estava correto.
    Alguém poderia me ajudar?

    ResponderExcluir
  8. sinceramente eu me apaixonei por este menu em abas no blog mais quando coloquei so apareceu mais um novo gadget com o nome postagens com tags geográficas e num faz nada so aparece uma telinha branca carregando sem parar :(

    ResponderExcluir
  9. AUREA
    grata pela resposta via e-mail
    bjks

    ResponderExcluir
  10. Os links das imagens, já estão fora do ar, recomendo hospeda-lós no própio blogger, ou no ImageShack.us

    ResponderExcluir
  11. não funcionou no meu, eu quero colocar no newsidebar, ja fiz tudo, só que não dá e o meu blog, eh .blogspot

    ResponderExcluir
  12. isso não funciona mais =(
    olha> http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js

    o javascript está protegido e da erro de que não existe
    arruma isso por favor
    meu blog já está todo arrumado

    ResponderExcluir
  13. Eu não encontrei esse código no meu blog ...

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

    ResponderExcluir
  14. Olá!
    Estou com dificuldade para o passo, onde tenho que instalar o JQuery e o Script em seu blog. Como faço isso? onde acho esses programas e como o instalo em meu blog?
    Alguem me da uma luz please!!!!
    abraços
    Rafael

    ResponderExcluir
  15. ficou certinho ,porem tive de pegar "bloggertabv1.0-min.js" de outra fonte porque este esta off , ai funcionou certinho ,,, mto boa a explicação

    ResponderExcluir
  16. não consegui fazer, não aparece nada

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.