Menu com abas multinível e caixa de pesquisa expansível - * Blog Elaine Gaspareto *

Menu com abas multinível e caixa de pesquisa expansível

em 19/10/2016

menu com abas multinível e caixa de pesquisa expansível

Anos atrás eu salvei o código desse menu de um blog indonésio e nunca consegui fazê-lo funcionar sem erros nos templates do Designer de Modelo do Blogger.
Daí desisti de traduzir e corrigir os erros, mas recentemente uma leitora aqui do blog viu o menu nesse blog de testes meu e pediu para que eu publicasse o tutorial.
Mexi de novo e com a clareza de uns anos à mais de aprendizado, deu certo.
É esse menu que vamos aprender como instalar e configurar hoje.
Veja a demo:

Demonstração do tutorial


Para dar certinho em qualquer template nativo do Blogger peço que você leia e releia o tutorial até o fim, e veja o vídeo que gravei com a realização do tutorial, passo a passo.
Aí não terá erro, ok?
Não testei em templates baixados da internet, então se quiser tentar faça e me diga nos comentários se deu certo :)
Vamos ao tutorial?

Para começar acesse a página com os códigos a serem usados, e a mantenha aberta.


Copiar os códigos


Agora vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e na caixa de código que expandir tecle (dentro da caixa de códigos) Ctrl+F.
Vai aparecer a barra de pesquisa; dentro dela digite ]]></b:skin> e tecle Enter para localizar.
ACIMA  dessa tag de fechamento cole o CÓDIGO CSS e salve.

Nesse código está tudo o que define a aparência de seu menu: cores de fundo e de fonte, tamanho da fonte, altura e largura do menu, etc...
Deixei marcado em capslock, no próprio código, todas as áreas que são seguras editar.
Mude cores e fontes para combinar com seu blog e salve as alterações.

Agora vamos instalar o código que fará o menu aparecer, o CÓDIGO HTML.
Copie-o na página de códigos.
Vá ao código-fonte de seu blog, na barra de busca digite </header> e tecle Enter para localizar.
ABAIXO dessa tag cole o CÓDIGO HTML.
Salve.
O menu aparecerá abaixo de seu cabeçalho.



Como configurar o menu



Agora é o momento de configurar as abas e sub abas do menu. Preste atenção!
Em geral um menu com abas e sub abas serve para colocarmos links de marcadores, de páginas estáticas, se sites externos, de posts, etc.
Tudo o que desejar e tiver link pode ser colocado em um menu.
Para exemplificar vou configurar uma aba com sub abas desse menu, como se fosse para meu blog.
Escolhi a Aba 4 do menu, que vou chamar de Aba de exemplo.
Configurei assim:

Pink é o nome da aba superior.
Azul é o endereço do link. No meu exemplo é o link de uma página onde listo todas as Dicas para blogs.
Em vermelho é o nome da sub aba simples.
Em laranja é o nome da sub aba multinível. Em roxo, os links de marcadores do blog. E em verde os nomes das abas multinível.
Em marrom os links das sub abas simples, e em amarelo os nomes dessas abas. De novo, no meu exemplo, são marcadores/categorias do meu blog.
A aba Vida doméstica segue o mesmo padrão.
Veja:


<li class='top'><a class='top_link' href='#'><span class='down'>Aba de exemplo</span></a>
    <ul class='sub'>
    <li><a href='http://www.elainegaspareto.com/p/todas-as-dicas-para-blogs.html'>Todas as dicas</a></li>

    <li><a class='fly' href='#'>Dicas específicas sobre:</a>
    <ul>
    <li><a href='http://www.elainegaspareto.com/search/label/Monetiza%C3%A7%C3%A3o'>Monetização</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Coment%C3%A1rios'>Comentários</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Otimiza%C3%A7%C3%A3o'>Otimização</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Menus'>Menus</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Marcadores'>Marcadores</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Postagens%20mais%20lidas'>Postagens mais lidas</a></li>
    </ul>
    </li>

    <li><a href='http://www.elainegaspareto.com/search/label/Publicidade'>Publicidade</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/cr%C3%B4nicas'>Crônicas</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/M%C3%A3e%20de%20cachorro'>Mãe de cachorro</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Filmes%20e%20s%C3%A9ries'>Filmes e séries</a>
</li>

    <li><a class='fly' href='#'>Vida doméstica</a>
    <ul>
    <li><a href='http://www.elainegaspareto.com/search/label/Receitas'>Todas as receitas</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Receitas%20doces'>Receitas doces</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Receitas%20salgadas'>Receitas salgadas</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Cozinha%20para%20iniciantes'>Cozinha para iniciantes</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Dicas%20dom%C3%A9sticas'>Dicas domésticas</a></li>
    <li><a href='http://www.elainegaspareto.com/search/label/Decora%C3%A7%C3%A3o'>Decoração</a></li>
    </ul>
    </li>
    </ul>
    </li>



Percebe como tudo faz sentido e fica certinho?
É só definir quais serão suas abas, colocar os links e nomes no lugar exato e voilà! Tudo pronto!

Dicas extras essenciais


1- Como colocar marcadores no meu blog?
Leia este tutorial: Como inserir marcadores em minhas postagens?

2- Como conseguir os links dos marcadores?
Simples: clique sobre o marcador cujo link deseja e copie o endereço que aparecer no navegador. Esse é o link de seu marcador.

3- Quero retirar uma aba do menu, como faço?
Apague o trecho referente à aba que deseja retirar. Deixei separadas no CÓDIGO HTML justamente para facilitar onde começa e onde termina cada aba.

4- Quero acrescentar mais abas, como faço isso?
Copie o código referente à aba que deseja "repetir" e cole onde deseja que ela apareça, ou seja: entre as abas já existentes, sempre antes de fechar a div do menu, antes do começo da caixa de pesquisa.

5- Quero tirar a caixa de pesquisa...
Apague o código que começa com <!-- Caixa de pesquisa --> e termina com </form> no CÓDIGO HTML.

6- Quero colocar links externos, como do meu perfil em redes sociais, por exemplo...
Sem problema: é só copiar o link de cada perfil seu e inserir no menu, na aba escolhida.
Assim como qualquer link externo, de loja virtual, de outro blog seu, etc...


Abaixo deixo o vídeo que gravei da tela mostrando como inserir o menu.




Aproveite e se inscreva no canal de tutoriais do blog:



Sei que parece o fim do mundo mas é muito simples  intuitivo.
Espero que você estude e aproveite o tutorial. Ele deu trabalho mas se você aproveitar terá valido a pena!
Aproveito para pedir: compartilhe esse post em suas redes sociais.
Isso ajuda demais o blog e me ajuda!
Enjoy!


23 comentários via Blogger
comentários via Facebook

23 comentários:

  1. Não ouso mais mexer no meu...
    Não tenho coragem.
    Tá bonitinho e vai indo...
    É uma forma que encontrei de me distrair.
    Bjs

    ResponderExcluir
    Respostas
    1. Maria, experimenta em um blog de testes, de repente você gosta e pega os jeitos :)
      bjssss

      Excluir
  2. Oi Eliane e para que este munu lindo fique no topo, são válidas as instruções com base no seu tutorial sobre menu no topo? Adoro o seu e está na cor que quero. Bjos e obrigada

    ResponderExcluir
    Respostas
    1. Regina, esse menu não testei fixo no topo, então não sei dizer se dá certo.
      Mas faça o teste, e se der certo me diz :)
      bjsssss

      Excluir
    2. Olá, Elaine, também gostaria de deixá-lo no TOPO. Tentei apenas alterar RELATIVE por FIXED, mas não funcionou. Você conseguiu, Regina? Obrigada!

      Excluir
  3. Oi Elaine, muito boa noite!!!
    Sou ávida em deixar o blog bem arrumadinho e de fácil entendimento para os leitores!
    Seu tutorial está maravilhoso e agora, após chegar do trabalho, resolvi tentar e não é que deu certo?
    O menu ficou lindo e com tudo o que o blog precisa para facilitar a procura do assuntos!
    Inclusive personalizei com as cores do meu blog e ficou incrível.
    E ainda tem uma aba de busca, não poderia ser melhor!!!

    Seu trabalho é espetacular Elaine e me ajudou muito!!
    Agradeço sua dedicação em postar o tutorial em vídeo! É ótimo!!
    Vou voltar sempre, deixo um abraço!!
    Maravilhosa semana!!

    ResponderExcluir
    Respostas
    1. Adriana, que comentário mais lindo e animador!
      Fico extremamente agradecida por suas palavras!
      Volte sim, a casa é nossa rsrsrs

      beijossss

      Excluir
  4. Elaine, muito obrigada pelo tutorial, consegui fazer este para o meu blog!Quando comecei a pesquisar sobre o assunto, parecia um bicho de sete cabeças, tentei todos os tutoriais do teu blog, mas queria um Drop down, então optei por este!
    Ainda estou editando e descobrido coisas do menu, se quiserem dêem uma olhada:
    http://outwardy.blogspot.com.br/

    ResponderExcluir
  5. Sensacional! Estou usando esse menu lindo!!

    Mas ele está aparecendo na minha versão mobile, alguém sabe como posso retirar?

    ABraço a todos!

    ResponderExcluir
    Respostas
    1. Lucas, procure aqui no blog um post que ensina como exibir gadgets na versão mobile.
      Nesse post tem a explicação de como não exibir um gadget na versão mobile...

      Excluir
    2. Aprendi lá mesmo! Deu certinho! Muito obrigado !

      Excluir
  6. Muito obrigada por seus tutoriais, Elaine! Estou pensando em voltar a me aventurar. Preciso de grana e se for com algo que gosto, tanto melhor.

    Beijossss

    ResponderExcluir
  7. Não consegui colocar. Fiz duas vezes no meu blog de teste e só aparece uma barra de pesquisa totalmente branca e simples abaixo do cabeçalho. Não aparece abas, cores, nem nada. Apenas essa barra. Alguém sabe por que?

    ResponderExcluir
  8. Olá Elaine queria saber como ter um menu horizontal com sub-abas? Tenho um blog ai queria colocar lá, queria ter esse menu pra organizar mais as coisas.
    http://gustavotokantins.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Gustavo, esse é um menu horizontal com abas...

      Excluir
  9. Por favor me ajuda, coloque esse menu mas não gostei pois são muitas sub abas e não consigo apagar. Quero colocar outro menu, como apago esse?

    ResponderExcluir
    Respostas
    1. Ingrid, refaça os passos, mas ao contrário, e vá apagando os códigos que inseriu.

      Excluir
  10. Boa noite Elaine,

    Antes de mais nada parabéns pelo trabalho.

    Você conhece alguma forma de colocar esse menu vertical com abas dentro de um post?

    Agradeço antecipadamente!

    ResponderExcluir
    Respostas
    1. Grupo RB, eu nunca testei mas se colar o código html dentro do post, em tese, o menu aparece. O post precisa estar em modo html, mas em tese funciona, só acho que vai ficar desconfigurado..

      Excluir
  11. Olá, eu de novo! uso esse menu no site que cuido, rrcac.com.br além de outras ferramentas aqui do seu blog. A questão é: VERSÃO MOBILE, VIEWPORT, quando configuro o viewport o menu desconfigura... Há uma forma de deixá-lo responsivo? Ou ocultá-lo na versão mobile e eu instalar outro que apareça na mobile e suma na versão web, já dei uma olhada em vários outros blogs me parece ser o mesmo menu, porém apesar de curioso não sou tão ninja nessas questões...

    ResponderExcluir
    Respostas
    1. Eduardo, tem uma série aqui no blog que mostra um menu responsivo, experimente procurar por Blog para celular.
      Além do menu a série mostra também como ocultar gadgets na versão mobile, talvez ajude.
      Está nos meus planos uma série de posts mostrando como tornar um template padrão do Blogger responsivo de fato, mas como é bem trabalhoso ainda não deu tempo de testar tudo e elaborar os posts.
      Mas vou, assim que der...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários