5 de mai de 2013

Incríveis menus em abas deslizantes com e sem JQuery

Olá a você leitor do Mundo Informal! No tutorial de hoje, atendo ao pedido de alguns leitores que gostaram do menu que uso aqui mesmo na sidebar do atual modelo do blog (03/05/13). Para quem quiser conferir o funcionamento básico, é só mover o mouse até a lateral do blog e clicar em alguma das 3 seções. A diferença do menu que tenho instalado para o que disponibilizo para você hoje, é que o que uso aqui é bem "cru", não tem pouquíssimo CSS e não tem o efeito deslizante. Vale lembrar que os dois últimos menus foram feitos pelo blogueiro Sothanaka e Vanessa(Mundo Blogger), todos os créditos pelo código a eles.
Sem mais demora, vamos ao passo a passo:
Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo 
 Fazer backup/Restaurar  Fazer download do modelo completo.

1° Estilo (Feminino):


Esse modelo já vem no ponto de ser instalado, e só será útil se você não pretende alterar o estilo CSS pois o mesmo usa de um CSS externo, ou seja você não precisa incluir nada na sua folha de estilos. Caso queira fazer alguma alteração, será necessário baixar, alterar o arquivo, fazer o upload novamente e substituir o link.

1° passo: Acesse a guia Layout → Adicionar Gadget → dicionar Html/Javascript e cole o código abaixo:

2° passo: Pronto! Agora é só alterar o título das abas e inserir o que deseja em cada uma delas.

2° Estilo menu em abas com JQuery:


Vale lembrar que o menu usa as cores de fundo do blog. No caso dessa imagem, o fundo do blog tinha a cor preta, sendo assim, não se assuste pois se o fundo do seu blog for branco, por exemplo, o fundo do widget também será.

1° passo: Vamos escolher e salvar o estilo que o menu vai usar, sendo assim, acesse Modelo → Editar HTML. Amplie a seção <b:skin> clicando na setinha preta ao lado e localize e tag ]]></b:skin>. Logo acima dela cole o seguinte código:
2° passo: Localize </head> e cole o seguinte código logo acima da tag encontrada.
3° passo: Para incluir o html do menu em abas, acesse a guia Modelo → Editar HTML e localize o código:
<div id='sidebar-wrapper'>

Substitua o código encontrado pelo seguinte:
4° passo: Vamos adicionar os widgets que aparecerão em cada aba do menu:
Acesse o menu “Layout” e clique em “Adicionar Gadget”. Note que aparecerão 3 novas seções de widgets, que correspondem ao numero de abas.

5° passo: Pronto! agora é só adicionar os widgets e salvar. 


3° Estilo (simples):


Se você é prefere um estilo um pouco mais simples e livre do JQuery ou por motivo de incompatibilidade com alguma biblioteca instalada, siga os passos abaixo:

1° passo: Vamos escolher e salvar o estilo que o menu vai usar, sendo assim, acesse Modelo → Editar HTML. Amplie a seção <b:skin> clicando na setinha preta ao lado e localize e tag ]]></b:skin>. Logo acima dela cole o seguinte código:


2° passo: Altere cores, bordas, entre outros seguindo os comentários do código CSS ao seu gosto.


3° passo: Para adicionar o menu acesse a guia Layout → Adicionar Gadget → Adicionar Html/Javascript e cole o código abaixo:



4° passo: Salve e confira o resultado!

Obs. Caso queira incluir outra aba basta incluir mais uma condicional no código antes da última </div> do código completo.

Espero que tenham gostado!
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

3 comentários

  1. Nossa super legal o menu se possivel eu gostaria de usa-lo e editar o codigo te creditando é claro ja estou te seguindo abraços Rebel.



    www.levigustavodicas.com

    ResponderExcluir
  2. Otimo, estava precisando de um menu simples com abas para o meu blog http://desenvolvendoinformacaojava.blogspot.com.br/, valeu

    ResponderExcluir
  3. :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :))

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo