Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508668343
Vida do cache: 1508711543
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Menu em abas deslizante na sidebar com JQuery

[alerta]
Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima), ou templates modificados. Esta dica NÃO se aplica aos novos modelos criados em Designer de Modelo.[/alerta]

Neste tutorial você vai aprender a instalar um menu em abas com efeito deslizante na sidebar, com JQuery.
Com este menu você pode aproveitar melhor o espaço dos elementos na sua sidebar.
Ele funciona á base de um javascript e possui um efeito deslizante bem bonito ao fechar uma aba e abrir a seguinte. Ele é simples e fácil de instalar, e o que é melhor, é bem leve!

Demo

Para este menu, você não precisa se preocupar em hospedar o arquivo javascript, pois iremos utilizar um arquivo que faz parte da biblioteca Google API.

Então vamos a instalação!

Antes de prosseguir, aconselho que você faça um backup do seu template, pois se algo sair errado, é só você utilizar seu backup para restaurar seu modelo.

1º passo: Definir os estilos para o seu menu em abas:

Vá em “Editar HTML”, (não precisa clicar em ‘Expandir modelos de widgets’), e cole o seguinte código logo ACIMA da tag ]]></b:skin>


/*--- Menu em Abas ---*/
.widgets{
float:left;
margin:1px 0 10px 1px;
width:auto;}

ul.tabnav{
margin:0;
padding:0;
width:auto;
text-align:center;
}
/*--- Titulos das Abas ---*/
.tabnav li{ /* estilos para os titulos da lista */
display:inline;
float:left;
list-style:none;
margin:0 2px;
padding:2px 10px 20px 10px;
border:1px solid #fff; /* edite cor da borda */
background:#0066CC; /* edite cor de fundo */
}
/* estilos para titulos ativos */
.tabnav li a{
color:#fff; /* edite cor do texto */
display:block;
font-size:95%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 0 0 2px;
outline:none;
padding:2px 3px 1px 3px;
text-transform:uppercase;
}
/*--- Abas Ativas ---*/
.tabnav li a:hover, /* estilos para os links hover e aba ativa */
.tabnav li a:active,
.tabnav li.ui-tabs-selected a{
background:#0066CC; /* edite cor de fundo */
color:#fff; /* edite cor do texto */
text-decoration:none;
}
/*--- Container com os Widgets ---*/
.tabdiv{
background:#000; /* edite cor de fundo */
border:1px solid #fff; /* edite cor da borda */
padding:5px 0 0 5px;}

.tabdiv h2{
display:none;}

.tabdiv ul{
list-style:none;
padding:5px 0px;}

/*----- Links Internos -----*/
.tabdiv li{/* estilos para os links dos widgets */
border-bottom:1px dashed #fff; /* edite cor da borda */
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 4px 10px;}

.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden;}

.tabdiv li a:hover {
text-decoration:none;}

.ui-tabs-hide{
display:none;}

2º passo: Adicionar o arquivo Javascript para funcionamento do menu:

Cole o seguinte código logo ACIMA da tag </head>


<!-- JavaScript JQuery Menu em Abas -->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>
<!-- Fim JavaScript JQuery Menu em Abas -->

Salve as modificações, porém ainda não será possível visualizar seu menu em abas, pois ainda será preciso inclui-lo no seu html.
Vamos ao próximo passo.

3º passo: Incluir o menu em abas no html do template:

Entre no menu “modelo”, opção “editar html”, mantenha desmarcada a opção: ‘Expandir modelos de widgets’.
Procure pelo trecho:


<div id='sidebar-wrapper'>

E SUBSTITUA esta linha pelo código a seguir:


<div id='sidebar-wrapper'>
<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>

<!-- ALTERE AQUI OS TÍTULOS DO SEU MENU EM ABAS -->
<li class='tab1'><a href='#tab1'>Perfil</a></li>
<li class='tab2'><a href='#tab2'>Arquivo</a></li>
<li class='tab3'><a href='#tab3'>Blogroll</a></li>
</ul>

<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>

</b:section> <!-- /end sidebar-tabs-1 -->
</div> <!-- /end tab1 -->

<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>

</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->

<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>

</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->

</div> <!-- /end tab-sidebar -->

 

Altere os titulos de cada aba se preferir, os campos estão destacados no código para facilitar a identificação.
Importante: seu menu em abas ficará no TOPO da sidebar.

Adicionar os Widgets ao menu em abas:

Vá no menu “layout” e clique em “adicionar gadget”
Clique em cada título para adicionar um gadget referente a cada aba do seu menu:

No exemplo usado aqui, eu dei titulos para cada aba, conforme os widgtes que quis acrescentar (Perfil, Arquivo e Blogroll), mas se você quiser dar outros titulos, não se esqueça de editar os titulos de cada aba, conforme explicado no tutorial.

 
[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery.
Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.[/alerta]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

23 Comentários

  1. .:: Clau ::. disse:

    Eduardo e Lay
    Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como ajudar, pois não há como eu saber o que ocorreu no template de vcs, mas de qualquer forma agradeço pelo comentário.

  2. Lay costa disse:

    consegui resolver o problema no html mas agora as abas ñ funcionam, vc sabe oq poderia causar isso?

  3. Lay costa disse:

    oi eu to tendo o msm problema que o Eduardo R., qnd vizualizo o blog aparece os links normais, mas qndo vou ver em elementos de páginas os widget ficam grudados neles de modo que ñ da p ver os links e nem inserir gedgets nele; já tentei corrigir com clear:both; mas ñ muda nada, será q eu to fazendo algo errado?

  4. Eduardo R. disse:

    Eu consegui adicionar o menu e tal, mas os outros widgets ficam por cima dele. Sabe o que pode ser isso?

  5. .:: Clau ::. disse:

    Lucy
    Fico feliz que tenha dado certo e obrigada mais uma vez pelo comentário :)

  6. ? Lucy Sem Fronteiras ? disse:

    Olá Clau!

    Muito obrigada pela pronta resposta. Realmente não tinha atentado para estes trechos indicando os locais onde podemos fazer as alterações.
    Me ative tanto a colar os códigos no lugar certo, que não vi esta parte;)
    Mas desde já estou muito feliz, pois era exatamente esse modelo que eu procurava há tempos.
    Tinha aqui um link teu desse menu, mas ainda era o endereço do Mundo Darknees, de modo que quando eu clicava nesse favorito, abria dizendo que este link não existia mais, e convidava a acessar em mb.com.br.
    Por isso custei a encontrá-lo aqui.

    Obrigada!
    ;))

  7. .:: Clau ::. disse:

    Lucy
    No código CSS já estão destacadas as partes que vc pode editar as cores dos links e plano de fundo. Basta editar as cores que vc quer e ir testando.

  8. ? Lucy Sem Fronteiras ? disse:

    Olá Clau!

    ötimo este tutotial! Na verdade, eu até consegui aplicar esse menu facilmente em meu blog de testes, era realmente o que eu queria mas só tem um problema:

    tem como mudar as cores dele? é que meu template é todo em tons de rosa e esse não combina.
    Não estou te pedindo para fazer nada não, apenas queria que você me desse uma "luz" em como eu poderia personalizar este menu que combinasse com o meu blog, se fosse possível a ti.

    Desde já muito obrigada!

    Beijos no coração:)

  9. Obsoletos! o10 disse:

    Ah sim..

    se vc puder localizar pra gnt, vai ajudar d+
    desde já agradeço 😀

    e parabéns pelo seu blog, sempre pego dicas mto boas nele!

  10. .:: Clau ::. disse:

    Obsoletos
    Realmente, este tutorial se aplica aos antigos templates padrões do Blogger, ou templates modificados, não se aplicam aos Designer de Modelo.
    Na data que criei e publiquei este tutorial, ainda nem tinhamos esses novos designer de modelo disponiveis.
    Devido a facilidade de poder escolher como dividir as colunas da sidebar, os códigos referentes a sidebar podem variar dependendo do modelo que você estiver usando e da quantidade de colunas que você já tiver determinado.
    O que eu posso tentar fazer é, assim que tiver um tempinho, dar uma verificada em algum modelo do designer de modelo e tentar localizar o trecho referente a coluna sidebar, de algum modelo,mas não terá como eu incluir todos os códigos, mas dá pra pelo menos deixar alguns exemplos para que cada usuário do designer de modelo consiga localizar o código da sidebar no modelo que estiver usando, assim como eu fiz neste artigo:
    Personalizar os titulos da sidebar.

  11. Obsoletos! o10 disse:

    Olá, esse menu é ótimo, mas não tem esse trecho nos modelos novos do Blogger:

    div id='sidebar-wrapper'>

    Eu procurei nos meus códigos a barra lateral e coloquei o código do menu, conforme seu tutorial, mas descartando a parte do código q não encontro. Mas ele não funcionou direito, ficou um de baixo do outro, ou seja, a coluna não dividiu. =/

    Se vc puder me ajudar, acho q mtas pessoas também estão passando pela mesma situação.

    Obrigado, Henrique.

  12. HeyLiah disse:

    Nos novos modelos do blogger, não tem esse trecho: div id='sidebar-wrapper' colo onde então?
    Kissu

  13. educpaulofreire disse:

    Não consigo encontrar o HTML do 3° passo…
    alguém sabe me explicar o por que?

  14. Lili disse:

    Olá! Adorei o tutorial, mas no meu template não tem esse código: div id='sidebar-wrapper' Como faço?

    Obrigada
    Lili

  15. ::Clau:: disse:

    @th3m@d0xt3r:
    Vc chegou a tentar instalá-lo da forma normal?
    Olha pra te falar a verdade, eu nunca fiz teste nenhum em instalação de js nos templates designer de modelo, pra ser sincera eu nem gostei muito deles..rs
    Então não posso te afirmar se há alguma diferença de instalação ou não…mas pelo pouco q andei vendo, acredito q não haja diferença, mas…não tenho certeza. É aquela velha frase: para cada caso é um caso, tudo é questão de tentar e testar.

  16. th3m@d0xt3r disse:

    olá, como faz pra esse menu funcionar num template feito no editor de desing do blogger?

  17. ::Clau:: disse:

    @Avelino:
    Eu já sei o que é. Vc instalou o trackback twitter e esse script dá conflito com o menu em abas..não sei pq!
    Eu tinha o menu em abas aqui, vc lembra, mas qdo fui instalar o twitter trackback, as abas pararam de funcionar, tanto que acabei retirando.
    Eu estou vendo um outro tipo de menu em abas, mais leve, assim que terminar de testar, se der certo, eu publico.

  18. Avelino disse:

    OLá!
    Pode dar uma olhada se quiser pois antes funcionava pode ser o excesso de script ou não http://blogdeteste235.blogspot.com/

    Abraço!

  19. ::Clau:: disse:

    @Avelino:
    Estranho, pq esse script é o que estou usando aqui no blog (veja o menu em abas na sidebar), e aqui não ocorreu erro algum. Eu apliquei o menu em abas conforme consta neste tutorial e está perfeito. Infelizmente eu não sei como te ajudar, pq não sei o que deve estar ocorrendo com o seu.

  20. Avelino disse:

    Desculpa incomodar mais parece que está com problemas o script é do google mais acredito que se for que nem o do outro que você corrigiu e adicionou direto no template funcione pois estava tudo normal,pode ser pela quantidade de scipt que uso o template que estou personlizando ou não acredito que se for no template direto possa para os erros…
    Abraço!

  21. Avelino disse:

    Eu estou personalizando o minima e até dá para editar mais da um erro estranho e fica embaicxo dos outro widgets adicionados antes,mais agora está ok depois que dividi o sidebar em duas colunas seguindo seu tuto.
    Abraço!

  22. ::Clau:: disse:

    @Avelino:
    Deve ter ocorrido algum erro durante a aplicação, pq eu apliquei esse menu em abas no template padrão do blogger (tem o link para demo no post) deixando-o no inicio da sidebar e ele funcionou normalmente.

  23. Avelino disse:

    Pode ser que so de para editar os widgets se o menu ficar no final da sibebar pois no começo fica em baixo dos outros e tem que deletar,pelo menos comigo aconteceu isso no tplt padrao do blogger.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.