Menus Vanessa S.
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!
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("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</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]
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.
consegui resolver o problema no html mas agora as abas ñ funcionam, vc sabe oq poderia causar isso?
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?
Eu consegui adicionar o menu e tal, mas os outros widgets ficam por cima dele. Sabe o que pode ser isso?
Lucy
Fico feliz que tenha dado certo e obrigada mais uma vez pelo comentário 🙂
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!
;))
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.
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:)
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!
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.
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.
Nos novos modelos do blogger, não tem esse trecho: div id='sidebar-wrapper' colo onde então?
Kissu
Não consigo encontrar o HTML do 3° passo…
alguém sabe me explicar o por que?
Olá! Adorei o tutorial, mas no meu template não tem esse código: div id='sidebar-wrapper' Como faço?
Obrigada
Lili
@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.
olá, como faz pra esse menu funcionar num template feito no editor de desing do blogger?
@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.
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!
@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.
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!
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!
@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.
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.