Instalando o Menu em Abas no Seu Blogger

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Pesquisando na net aprendi a fazer este menu em abas que está instalado aqui no Templates, da imagem ao lado, mais fácil para quem tem menos experiência com os códigos e mais editável.

Principais Vantagens:
♦ Neste menu você pode aumentar ou diminuir o número de abas e até criar outro menu abaixo;
♦ Simples e fácil de ser adicionado em seu template.

Aprendi a fazer este menu neste site: BarelyFitz Designs
O código javascript é opensource.

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.

Obs: ♦ Estou utilizando como base o Template: Minima, Designer: Douglas Bowman que é disponibilizado pelo blogger.
♦ Este post foi publicado a 1ª vez em Abril/2008 e está sendo Republicado com várias modificações na intenção de melhorar o aprendizado.

Vamos ao Hack:
Clique em Layout ► Editar HTML.

1º Passo - Criar uma Gadget para o Menu em Abas

» Você vai criar uma nova gadget/gadget para seu menu em abas.

1º - Adicione o código CSS no HTML do seu template abaixo do código da #sidebar-wrapper(coluna lateral).

♦ O código em vermelho é o que vai ser adicionado.
Ficará desta forma:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float*/
}
#tabsidebar-wrapper{
width: 220px;/*Defina a largura do seu widget*/
margin:30px 0px 5px 0px;
border: 1px none $bordercolor;
float:right;
}

OBS:
♦ margin ► Margens → Siga o raciocínio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template.
♦ float ► Aqui você define qual o lado seu menu vai flutuar: right-direita, left-esquerda.

2º - Acima da tag <div id="'sidebar-wrapper'"> cole o código:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->

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

2º Passo - Colocando o Estilo CSS do Menu em Abas

» Copie o código CSS do menu e cole acima da linha ]]></b:skin>(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 modelo.

3º Passo - Instalar o Javascript

» Copie o código Javascript abaixo e cole acima da tag </head>:

<script src='http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'/>

ATENÇÃO

»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem(Sugestão Dropbox);
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.

» Para isso copie o código abaixo e cole acima da linha </head>

<!-- JavaScript Tabber-->
<script type='text/javascript'>
//<![CDATA[
/* Copyright (c) 2006 Patrick Fitzgerald */
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\b'+this.classMain+'\b','gi');this.REclassMainLive=new RegExp('\b'+this.classMainLive+'\b','gi');this.REclassTab=new RegExp('\b'+this.classTab+'\b','gi');this.REclassTabDefault=new RegExp('\b'+this.classTabDefault+'\b','gi');this.REclassTabHide=new RegExp('\b'+this.classTabHide+'\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}  //]]>
</script>

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

♦ Clique em Salvar modelo.

4º Passo - Fazer Funcionar o Menu em Abas

» 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 → <div id="'sidebar-wrapper'">.

1º - Copie o código abaixo:

<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab1' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab2' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab3' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab4' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab1-->

<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab5' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab6' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab7' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab2-->

2º - Cole este código entre as tags:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->

» Criadas no 1º Passo. Lembra?

3º - Observações Importantes:

♦ Com este código acima você irá acrescentar 2 menus em abas, sendo o primeiro com 4 abas e o segundo com 3 abas.

♦ Você pode retirar um dos menus RETIRANDO este código:

<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab5' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab6' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab7' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab2-->
</div><!-- End Tabsidebar-->

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

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab#' maxwidgets='1' showaddelement='yes'/>
</div>

♦ 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 modelo.

Post Atualizado em 17/08/09 e Republicado nesta data.

Atualização Importante 18/09/2011:

Este hack não funciona no seu blog se você tiver domínio próprio, mesmo que seja redirecionado como é o meu por exemplo: http://www.templatesparavoce.com Precisa ter o blogspot no endereço. Fiquei super triste quando tentei colocá-lo neste blog depois de comprar o domínio, mas não deu certo.

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.