![[v2] BloggerAntenado](http://4.bp.blogspot.com/-EnYHZzntmgI/WV7h774Y5UI/AAAAAAAAGoA/5CH9QZnSzRI43UabdZDMQ0pu6ECGqQC4QCK4BGAYYCw/s1600/MasignCleanLogo.png)
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.
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!Share This :
comment 3 comentários
more_vertNossa 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.
19 de maio de 2013 às 05:52www.levigustavodicas.com
Otimo, estava precisando de um menu simples com abas para o meu blog http://desenvolvendoinformacaojava.blogspot.com.br/, valeu
8 de dezembro de 2013 às 05:29:)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :)) :))
27 de outubro de 2014 às 11:22