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

em 19 de outubro de 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!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

8 comentários , comente também!

  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

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…