Instalando o Menu em Abas no Seu Blogger


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.
Instalando o Menu em Abas no Seu Blogger Instalando o Menu em Abas no Seu Blogger Reviewed by Áurea on 8/15/2009 Rating: 5

77 comentários:

  1. Obrigado por repassar tudo o q vc aprende para agente. Excelente trabalho e adorei essa dik!

    ResponderExcluir
  2. não consegui por cara
    apareceu lá mas as abas ao invés de ficarem ocultas elas ficaram uma embaixo da outra

    ResponderExcluir
  3. oi poxa eu fiz um template e na postagem deles so aparece a data no primero post vc pode me ajudar???

    plisssss!!!

    bezao_ro@hotmail.com

    obrigado

    ResponderExcluir
  4. Olá a Todos,
    Estive ausente neste fim de semana, mas prometo responder a todos durante a semana!
    Áurea

    ResponderExcluir
  5. Ei Áurea, tudo bem ? Bom, vim te convocar a conhecer um blog que fiz sobre dicas, é um diretório com algumas das dicas que encontrei por aí, e adivinha quem está lá ? VOCÊ, rsrrsrs. Beijos

    ResponderExcluir
  6. Oi tudo bom ?
    nossa esse menu em abas é simplismente maravilhoso ...
    Eu sempre venho aqui ver seu trabalha nunca postei ...
    a pouco comecei com dois blogs o Blogger modificado, e o que pensa da vida ?.
    coloquei seus link la no blogger modificado mais não vim aqui para dizer isso .
    adoro seus trabalhos e ficaria feliz se vc desde uma passada no meus blogs .
    abraço !
    fik na paz !

    ResponderExcluir
  7. Claro que sim! =D

    Com os créditos nem precisa pedir!

    abraços


    ---
    Paulo Estevão
    Códigos Blog

    ResponderExcluir
  8. Áurea, obrigado por passar lá no meu blog !
    fiquei super feliz !!
    seu link jah está comigo !
    bjs bjs
    tbm é super simpatica !
    mais um motivo para seu blog ser o que é hj .
    bjs !

    ResponderExcluir
  9. NOSSA, não sabia que dava pra fazer tudo isso em um blog. Vou tentar fazer no meu, depois falo se consegui. Me diga outra coisa, tem algum tutorial ensinando a fazer Templates?

    Grato

    Evandro Villaça

    ResponderExcluir
  10. Nossa! Um trekinho desse ficaria show lá no "Luz". Eu daria uma boa organizada na bagunça! (rs*) mas por trás de uma mudança vem sempre outra e eu teria que mudar tudo! Até o template!! sem saco...beijus

    ResponderExcluir
  11. Oi! Gostei muito do blog mas confesso que não sei colocar template de tres colunas no meu blog. Nao sei o que fazer...

    Dez essa sua iniciativa de passar o que sabe.

    Já está linkado... Bjo, Claudia

    ResponderExcluir
  12. Olá Aurea, parabéns pelo Blog! Perfeita diagramação, um layout realmente impecável e o conteúdo nem se fala!
    Estou tentando implementar o código no meu Blog, mas está dando um erro.
    Achei tão bonita a sua página que vale a pena continuar tentando.
    bjks

    ResponderExcluir
  13. O erro é:
    "Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: bordercolor"

    ResponderExcluir
  14. Áurea, quanto ficaria para você fazer esses ajuste no meu template?
    Dê um pulinho na minha página e me envie um e-mail pelo formulário contato.
    Pretendo diminuir um pouco a largura dos posts para dar mais espaço para a sidebar.
    A propósito, meu nome é Wilmar Falcão.
    Abs

    ResponderExcluir
  15. Recebi seu recado Áurea, vou ficar te aguardando.
    Obrigado!

    ResponderExcluir
  16. Áurea, consegui acertar em quase tudo, mas encontrei um problema de incompatibilidade entre o IE e o Firefox:
    /*---
    ul.tabbernav li a{
    padding: 6px 0.5em;
    margin-right:2px;
    border: 1px solid #DEDEDE;
    border-bottom: none;
    background:#D5DFE8; /*Cor do fundo das abas inativas*/
    text-decoration: none;
    } ---*/
    No parâmetro padding: 6px as abas ficam muito em cima no IE. Para ficar com a aparência correta tem que ser definido para 11px.
    Como corrigir este problema?
    "

    ResponderExcluir
  17. Valeu Áurea, funcionou direitinho,
    você já está no meu Blog Roll ;0)
    Tanta bagunça por causa desse IE!
    Estou usando o novo Opera 9.50, e faz uma diferença incrível: minha página abre em 16 segundos contra 23 segs. do Firefox III e 40 segs. do IE7!
    Muito obrigado!

    ResponderExcluir
  18. Oi Aurea...tem duas coisas que preciso perguntar...quer dizer hehehe acho que varias:
    pra começar, tentei mudar de templae e por as widgets do anterior no atual e dai acabei excluindo o blog todo,tudo que estava nele sumiu,tudo e dai to refazendo tudo, as postagens consegui achar pelo google mas foi só isso, acho que nem deve ter como recuperar o blog antigo né? do blogger...
    Bem, a pergunta é sobre o menu em abas, ele não ta aceitando não sei por que, toda hora da erro, não sei se to colocando no lugar errado os codigos ou se não to entendendo mas não to conseguindo, pode me ajudar???
    ! não achei o codigo da primeira etapa:1º Você vai criar uma nova widget para seu menu em abas, adicionando o código CSS na seção Outer Wrapper do código HTML do seu template abaixo do código da "#sidebar-wrapper" este não achei mesmo só achei algo como The Sidebar....dai vem o segundo problema:
    O segundo passo tambem não acho a parte que seria pra colar, não sei bem onde colar alias.;..meu template é todo em XML...e ta tudo diferente....tentei colar mas ele não aceita, dai no 4 passo não achei esse codigo (div id='sidebar-wrapper') não achei mesmo..oque faço agora, me ajuda????? por favor....tem algo mais simples? é que é dificil para mim entender,tenho dificuldade.
    a outra questão pergunto já....

    ResponderExcluir
  19. Bom,vamos la...sabe a sua sidebar onde aparece lá os posts recentes? então, tem um icone em cada titulo né...eu quero saber como faço pra por isso no meu, pode ajudar nisso tambem????
    Eu te agradeço muiiiiito desde já viu, espero que possa me ajudar e por favor...se puder ser logo fico muito feliz,to desesperada aqui...
    Abraço grande e otimo resto de domingo pra você

    ResponderExcluir
  20. HELLLLLLPPPPPPP
    Eu fiz as abas so que no elementos de apgina alem de não aparecer as abas so da pra adicionar algum elemento na primeira...ajuda ajuda socorroooooooooo
    O que eu fiz de errado???

    ResponderExcluir
  21. Oi Aurea...sei que deve andar bem ocupada, andei conversando com a Jaque e ela me disse pra falar com você por que tenho algumas duvidas e não to encontrando nada pela net, to procurando e tal mas ate agora nada.
    O menu em abas eu tionha conseguido instalar mas não funciona ou sei la o que acontece..aparece os numeros das abas certo mas quando vou adicionar algum elemento fica em cima dos que ja tinha posto, acho que não configurei direito, eu tenho dificuldade pra entender de imediato, li e reli mas ate agora nada...
    Sera que você pode me dar uma ajudazinha? tipo pra eu saber o que pode ta acontecendo ou o que eu posso ter feito de errado...
    Alguns temas são bem diferentes dai nem sempre tem o codigo citado nas dicas....por exemplo...a sidebar, ja vi varios temas que o codigo tava bem diferente dai tive que ir testando ate encontrar o lugar onde o codigo que eu queria ia ficar..la no tema do Minima, a sidebar...não consigo achar o codigo dela pode,acho que deve ta diferente por que eu tava tentando por o menu no topo certo, mas não tava conseguindo dai por enquanto ele ta na sidebar por meio de uma widget que achei.
    Você conhece bem o template do Minima né? ele é beeeem simples mas alguns codigos não consigo achar ou identificar, pode me dar uma mão por favor? eu sou novata,bem novata nisso...agora eu coloquei o minima por que o tema que eu queria o Blue Marine não tava conseguindo fazer funcionar o menu então agora eu vou aprender HTML e dai vou aprender PHP..o motivo é obvio, assim que aprender vou mudar pro WorPress que realmente é melhor que o blogger, os codigos são menos confusos, não da bugs toda hora que ele atualiza como o Blogger e é mais rapido, da pra cirar paginas facilmente e rapido e se entender de PHP pode mudar os temas avontade...dai a escolha é bem obvia né...vou ter dificuldade por que eu aprender sem nimguem pra ajduar fica dificil mas vou me esforçar né, afinal eu amo informatica e adoro escrever como deu pra notar e to adorando o mundo dos blogges, as dicas...seu blog é bem legal viu, as dicas são otimas e bem explicadas, eu é que tenho dificuldade de pegar logo as coisas....
    Bom é isso, espero que possa me ajudar ok e muito obrigada desde já...a é, vou por link do seu blog na minha pagina de Parceiros tá....por que o seu blog realmente é bem legal,adorei mesmo, sempre que preciso de ajuda vnho aqui ver as dicas...
    Obrigada e abraço grande

    ResponderExcluir
  22. olá, queria saber como faço pra empurrar os menus mais pra cima porque no meu template ele ficou lá embaixo e acima tem outros menus queria botar o menu de abas na frente destes.

    ResponderExcluir
  23. Como eu posto na aba??? pois q1ndo eu posto vai nos arquivoss

    ResponderExcluir
  24. Megadown,
    Você só consegue posta nas abas se sua coluna de posts estiver contida nelas. O que não faz sentido. Você pode colocar nas abas seus marcadores, arquivo, posts recentes, etc...

    ResponderExcluir
  25. Nossa estou começando agora no blog e já mudei muitas coisas no meu blog graças a vc e o+impreçionate é as visitas q vc recebe, blogueiros q se dizem o tal, vem aqui pedir ajuda...hammmm...DESCOBRI A RAIZ...rs rs rs..Parabéns pelo seu blog querida, é o melhor que existe. Sobre seu post açima, olha, dá medo de mecher e dar errado+acredito fazendo certinho como vc ensina, acho q dá certo, vou tentar ok!
    Beijos e que Deus abençõe mto vc linda

    ResponderExcluir
  26. você pode esplicar direito onde eu devo colocar os códigos para fazer o menu
    eu tentei mas não consegui

    ResponderExcluir
  27. Olá Aurea, estou quebrando a cabeça mas não consigo visualizar meu blog de jeito nenhum, dá um erro:

    Não foi possível visualizar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: bordercolor

    Já tentei colocar aqueles numeros da tabela de cores mas acho q estou errando...
    se puder me orientar te agradeço bastante.

    ResponderExcluir
  28. 1006,
    Tente o tutorial do Usuário Compulsivo sobre menu em abas, a explicação dele está mais simplificada.


    Lua do Egito,
    Isso aconteceu porque seu blog não tem a variável bordercolor configurada. Encontre as palavras bordercolor usando Ctrl+F e substitua por um código de cor para a borda do seu menu em abas.

    ResponderExcluir
  29. Não consegui. No meu blog não tem:
    #sidebar-wrapper

    e

    div id='main-wrapper'

    ResponderExcluir
  30. Olá Aurea,

    Fiz de acordo com o q vc ensinou, porém os menus ficaram por cima da sidebar, o que pode ser isso (eu já tirei do blog)??

    ResponderExcluir
  31. Aurea me socorre!!
    Já tentei várias vezes colcar as abas, preciso muito de tres abas no começo do meu template.. mas ainda não deu certo...

    Eu tenho dificuldade de localizar o lugar para colocar a ultimo codigo.. vc pode dizer a linha exata onde eu vou acrescentar?

    Por favor! Já estou agoniada!! :(

    sem falar que, apareçe o seguinte aviso quando eu vou visualizar:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "".

    qualquer coisa meu e-mail/msn é blog_ai@hotmil.com

    ResponderExcluir
  32. Olá Áurea, é o Diego do ComputerDicas. Eu venho estudando os códigos dos menus com abas, e me ocorreu uma dúvida, eu gostaria de saber como instalar nas ABAS os widgets para mais visitados, mais comentados, recentes, etc

    ResponderExcluir
  33. Diego,
    Se você já tiver os códigos para estas widgets é só colar uma widget do tipo html dentro de cada aba.
    Nesta configuração (b:section)as abas já estão prontas para receber uma widget cada uma automaticamente na página de elementos de página do blogger.
    Mas se você ainda não tiver estes códigos, aqui no Templates ensino a colocar os posts recentes e comentários recentes. Nos blogs Blog a La Carte, Dicas Blogger, Templates Novo Blogger e Usuário Compulsivo já vi os outros tutos para mais visitados e mais comentados.
    Espero ter ajudado. Era isso que você queria?

    ResponderExcluir
  34. Ei tentei colocar as abas mas aparece que uma variável não foi declarada, me ajuda com essa questão de declaração, eu percebi que as variaveis são declaradas no inicio , mas uqal o tipo de uma variavel que recebe como entrada bordercolor, e se vc puder me ajudar mais pode me dizer QUAIS OS TIPOS DAS VARIÁVEIS QUE SE USAM PARA COLOCAR ESSE SISTEMA DE ABAS.

    ResponderExcluir
  35. o 1° já resolvi olha outro ,tá aparecendo isso

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:section" must be terminated by the matching end-tag "".

    ResponderExcluir
  36. sabe o que faltou ? exemplos de como ficaria , este é um dos erros das pessoas que postam certos tipos de ajuda , deveria ter imagens de como ficaria assim a pessoa escolheria fazer ou nao se interesante .

    ResponderExcluir
  37. Gaara Kazekage,
    Não sei se você notou, mas uso este menu aqui no Templates para Você.
    Quer exemplo melhor?

    ResponderExcluir
  38. Eu não consegui fazer no meu blog de teste apareceescrito isso


    Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: bordercolor

    ResponderExcluir
  39. Tá cruel pra instalar esse menu no meu blog, dá erro de b section

    mensagem: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:section" must be terminated by the matching end-tag "".

    Outra coisa, no meu código, eu encontro o div sidebar antes do div main-wrapper, sabe ta meio confuso, pois muitos estão tendo problemas, cada um com um código diferente, ta complicado instalar esse menu com abas.

    ResponderExcluir
  40. Aurea preciso muito de sua ajuda ...!
    Iniciei meu blog com um template .... ela estava muito bem ... já comecei a receber visitas ... mas achei seu template Tabs-01 muito interessante.
    Instalei ... ficou otimo , mas quando fui fazer as alterações as abas perderam as configurações.
    Tentei reinstalar o template mas sempre ele voltava com defeito.
    Quero muito usar este tempalte e se possivel edita-lo
    se estiver disponivel para ajudar meu e-mail:felipelellis@yahoo.com.br
    msn: felipelellis@hotmail.com

    E é claro que apos toda essa confusão quero me tornar seu parceiro!

    ResponderExcluir
  41. Não consigooooo!!! O meu template é compatível???

    ResponderExcluir
  42. Segundarendaextra,
    Substitua as variáveis que não tiverem no seu código, como a bordercolor por um código de cor ou coloque uma variável no seu código.
    Veja o link: Variáveis: entenda o que são e aprenda a criar uma.

    Diego,
    É importante que você saiba onde estão e o que representam os códigos do seu template. Por exemplo: Sidebars são as colunas das laterais aos posts que são representados por Main.
    Quando criei este post sobre os menus em abas usei as configurações básicas dos templates do blogger, mais precisamente o Mínima que tem estas colunas indicadas por estes nomes.
    Com relação ao erro que você relatou, você deve ter paciência e refazer os códigos em um template teste, porque testei todo o tutorial antes de publicá-lo e até mesmo uso as abas aqui no blog.
    Não tem problema que o div sidebar seja antes do main no seu template, isso significa que ele aparece primeiro seja o lado que você quiser esquerdo ou direito, o importante é que o Tabber esteja em cima da sidebar ou onde você quiser.

    Felipe,
    Não posso te ajudar se não visitar seu blog.

    Edys,
    É compatível sim. Você terá aprender sobre a estrutura do seu template para instalar o menu em abas!

    ResponderExcluir
  43. Ah sim, agora estou usando o template fornecido pelo compulsivo! O Albino. É bem melhor! E obrigado por me responder!

    Boa semana Àurea.

    ResponderExcluir
  44. Aurea: Eu instalei esse recurso via Compulsivo, porque quando eu usei seu código, dava vários erros relacionados às variáveis, eu teria que mudar cada variável(porque no meu template todas elas começam com main), e como sou preguiçoso demais para ficar copiando e colando :o), a personalização do Compulsivo me pareceu mais adequada, só que...
    No IE, não funciona. Com certeza é algo relacionado a margin e/ou padding. O problema é achar um valor em comum...

    ResponderExcluir
  45. ai amigos(as), eu ñ consegui fazer, me add no msn para me ensinar melhor, e para conversarmos sobre outras duvidas q tenho: jeanmichelkowalski@hotmail.com

    ResponderExcluir
  46. Não poderia deixar de fora de entre meus favoritos este Blog muito especial, de uma forma ou de outra estou sempre por aqui garimpando, minhas expressões referente a esse cantinho não poderia ser outra se não " FANTASTICO!!"

    Parabéns!
    Ademar do Conceitus de Beleza.

    ResponderExcluir
  47. Ademar
    Muito obrigada por gostar daqui! Fico muito honrada com seu comentário!

    ResponderExcluir
  48. Eu gostaria da sua ajuda !
    eu revisei tentei tentei tentei
    mas não consegui mesmo !
    até recriei o blog de "teste" e não foi possivel !

    quando deletei o blog achei os locais indicados.
    e continuo a da erro.

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Element type "b:section" must be followed by either attribute specifications, ">" or "/>".

    me interessa muito um menu com abas que tenha outros menus com abas dentro dele !

    eu instalei via compulsivo mas o compulsivo nunca me ajuda !
    ta funcionando legal no IE e no MOZIla mas quero adicionar menu dentro do menu com abas entende ?

    poderia me ajudar ?

    ResponderExcluir
  49. Thanks for tutorial, keep sharing knowledge.

    ResponderExcluir
  50. Áurea, colocar esse menu em abas, pesa alguma coisa na página, ou o carregamento é o mesmo?

    ResponderExcluir
  51. @Rafael Este menu demora mais um pouquinho para carregar que o resto do site. Sugiro que você coloque em um lugar abaixo da sidebar e depois do main de forma que não atrapalhe o carregamento inicial do blog/site. Já viu como é aqui no TPV? Mas mesmo assim adoro a funcionalidade deste menu.

    ResponderExcluir
  52. Olá, Áurea. Me desculpe, mas não encontrei outra forma de me comunicar com você. Gostaria de pedir que, se possivel, você postasse um tutorial de como colocar imagens nos titulos de postagem. Tipo, se o titulo for "Primeira postagem", no lugar de ser em letras comuns, botar uma imagem escrita "Primeira postagem" (assim como nos widgtes dá pra colocar uma diferente pra cada). Procurei bastante, mas não encontrei. Ou caso vc encontre um link, poderia deixá-lo aqui? Muito obrigada e desculpe!

    ResponderExcluir
  53. @Jana KeanuLôka Infelizmente não conheço nenhum tutorial que ensine o que você deseja. Mas prometo ficar atenta e se encontrar ensino aqui.

    ResponderExcluir
  54. não consegui nada, nao entendo nada disso. Q viagem.

    ResponderExcluir
  55. Olá, fantastico essa dica!
    Mais por mais testes que eu fiz infelizmente não consegui!
    Acho que é porque sou "novo" nesse ramo...

    ResponderExcluir
  56. @Rodrigo Em qual blog seu está tendo este problema?

    @Wagner Lemos Realmente precisamos de saber um pouco mais de CSS para que este hack funcione corretamente.

    ResponderExcluir
  57. Bom, fiz tudo exatamente como vc explicou. Fui visualizando e quando dava erro era por causa da variável que não tinha sido declara. Então declarei todas. Ao final, salveu as alterações e aparentemente estava tudo certo, porém as abas não apareceram...

    ResponderExcluir
  58. A parte de colocar o menu em abas eu consegui. Agora gostaria de saber como coloco várias postagens dentro de uma mesma aba, sem ser a do início. Por exemplo, criei uma aba biografias e quero colocar várias biografias lá, por isso precido de várias postagens. Como faço isso?
    Parabés pelas explicações!

    ResponderExcluir
  59. fiz todo o passo a passo mas não apareceram as abas, apareceram (adicionar gadget)nas lateral. A unica parte que fiquei meio em dúvida foi a do e - mail que tem que ser substituido no codigo do template pelo link fornecido pelaminha hospedagem, até baixei o dropbox. O que posso fazer?

    ResponderExcluir
  60. Oie Áurea, eu estalei deu tudo certo! Porém funcionou durante 3 horas e depois sumio. Eu estalei o java no Dropbox, estava funcionado normalmente e depois sumio. Então tentei estalar dentro do html com o codigo que você cita. Mas com esse codigo não funciona, apenas o estalado no Dropbox que funciona mas depois some. O que pode ser?
    Beijos.

    ResponderExcluir
  61. Oie Áurei, sou eu de novo. Teste e estou usando o seu java hospedado no http://www.barelyfitz.com/projects/tabber/tabber.js por enquanto não sumio nada, esta funcionado normalmente. Porque o meu que hospedei no Dropbox é furado, some a cada 2 horas.
    Vou ver se abro uma conta no barelyfitz.....Beijos.

    ResponderExcluir
  62. Gostei muito do tutorial mais no meu blog ficou muito lento.
    O que eu posso fazer pra corrigir isso ?

    ResponderExcluir
  63. Óla, muito legal o tutorial, mais gostaria de saber se tem como usar esse sistema de Abas nos posts, pra postas algum conteudo em abas!!

    Abraços.

    ResponderExcluir
  64. Oi não consigo fazer isso, todos esses codigos me confudem. Eu não consigo achar o lugar onde tenho que colar os codigos é muita coisa.

    ResponderExcluir
  65. olá, no meu editor não aparece (div id='tabsidebar-wrapper')
    o q eu posso fazer?

    ResponderExcluir
  66. Áurea, eu fiz tudo certo segui todas as suas instruções e o Menu funciona perfeitaments, mas a minha área de postagens desceu, ela começa a aparecer no final da sidebar, o que eu faço para corrigir esse erro?

    ResponderExcluir
  67. Maybe you can give english translate?
    i need it :)

    ResponderExcluir
  68. Ótimo tutorial, gostei muito, esse sim fúnciounou perfeito no blog.

    ResponderExcluir
  69. ver oq ta errado pra mim ;/
    fiz tudo certinho

    abraçosss
    vlwwwwwww

    ResponderExcluir
  70. Olá...fiz 2 vezes o procedimento, mas não funcionou .. a caixa menu simplesmente não aparece. Teria que criar algum gadget com html?

    ResponderExcluir
  71. será que eu consigo colocar gadgets diferentesnas abas de menu?

    ResponderExcluir
  72. olha se eu chorar minhas pitangas aki vai ficar um testamento, então, se vc puder escreva pro meu e-mail: aluanegra900@yahoo.com, poseidon_arthemis@hotmail.com, pq assim, eu posso responder + detalhadamente sobre o problema, tipo, adoooro templates e queria falar de várias coisas no meu blog,daí passei a baixar com menu incluído, mas qd eu posto vai sempre pra "home", não pra aba correspondente, oq é meio chato pq no blog falava tanto de makeup qt de sexo, convenhamos q meninas de 14 anos não tem necessidade de procurar qt custa o delineador da MAC e como usar e logo no post abaixo ter um "tutorial" de sexo oral, por isso o menu, me responda por favor

    ResponderExcluir
  73. Eu construí um menu no pragrama "CSS3 menu" e não estou conseguindo inserir o HTML corretamente no meu blogspot. O que será que estou fazendo de errado?

    ResponderExcluir
  74. ola Aurea nao consegui adicionar abas no meu blogger pode me ajudar por favor?

    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.