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: Demonstração do Menu em Abas JQuery


Clique em Layout ► Editar HTML

OBS: Se o seu blog tem domínio próprio este menu não funciona.
Ele só funciona em blogs com blogspot no endereço.
Quase morri de tristeza quando ativei o domínio novo do TPV e o menu parou de funcionar. Aí tive que tirar! Depois quebro a cabeça para fazê-lo funcionar com um domínio próprio.

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 {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright: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-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright: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 abaixo:

<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/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://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>
<!-- Fim JavaScript Menu em Abas JQuery-->

♦ Você  pode também baixar o arquivo JavaScript: Bloggertabv  » Salvá-lo num bloco de notas com o nome com a extensão .js, hospedá-lo num site de sua preferência e substituir o endereço http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js acima pelo seu endereço hospedado

♦ Clique em SALVAR MODELO.
OBS: Se você clicar em VISUALIZARseu menu não irá aparecer.

Antes de você Visualizar o seu blog entenda alguns pontos.

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. 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 Suas alterações foram salvas.Visualizar blog


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

A reprodução, parcial ou total deste post é proibida sem a autorização do autor.
A citação da fonte é obrigatória.