Passo a Passo para Criar uma Hierarquia de Menus e Submenus no Blogspot

Anderson com C

Como planejar a hierarquia antes de criar menus e submenus

Criar uma hierarquia de menus e submenus no Blogspot (Blogger) exige a estruturação correta dos marcadores das suas postagens e a implementação de uma barra de navegação responsiva no painel do sistema. Como a plataforma da Google não possui um construtor nativo de submenus no estilo arrastar e soltar em todos os seus temas padrão, a construção dessa estrutura hierárquica é realizada por três caminhos principais: a utilização do gadget "HTML/JavaScript" combinado com marcação de listas aninhadas e CSS; o uso do recurso de prefixos com sublinhado no gadget "Lista de Links" em temas otimizados; ou a edição direta das tags de navegação no código XML do modelo.

O processo fundamental consiste em extrair as URLs exatas dos marcadores do blog, definir quais categorias funcionam como seções principais e mapear os tópicos específicos que ficarão abrigados nos submenus flutuantes. Essa organização otimiza a experiência do leitor, facilita a varredura e a indexação pelos robôs de busca do Google e atende aos critérios formais de navegabilidade exigidos para a aprovação em programas de monetização como o Google AdSense.

Entendendo a Arquitetura de Navegação no Blogspot

A arquitetura de informação de um site no Blogspot é sustentada por dois pilares fundamentais: as páginas estáticas e os arquivos dinâmicos organizados por marcadores. Ao contrário de gerenciadores de conteúdo que possuem taxonomia separada para categorias e tags, o Blogger utiliza os marcadores como a única forma nativa de agrupamento temático para artigos.

Quando você adiciona um marcador a uma postagem, a plataforma gera automaticamente uma página de arquivo sob a estrutura de URL /search/label/NomeDoMarcador. A criação de uma hierarquia de navegação consiste em pegar essas URLs dinâmicas e organizá-las visualmente em uma relação de parentesco (categorias "pai" e subcategorias "filho").

Essa organização no cabeçalho da página oferece benefícios claros para a estrutura do seu projeto:

  • Clareza para o visitante: Permite que o leitor encontre tópicos relacionados em poucos cliques, reduzindo a taxa de rejeição e aumentando o tempo de permanência no site.
  • Distribuição de autoridade (Link Juice): Como o menu principal está presente no cabeçalho de todas as páginas, os links ali posicionados recebem fluxo constante de autoridade interna, sinalizando aos mecanismos de busca quais são os pilares mais importantes do blog.
  • Requisitos para monetização: O Google AdSense exige que os sites apresentem um sistema de navegação claro, transparente e funcional. Menus confusos, links quebrados ou a ausência de categorias organizadas são motivos frequentes para recusa de solicitações de aprovação.

Métodos para Criar Menus e Submenus no Blogger

Dependendo da complexidade do tema escolhido e do seu nível de conhecimento técnico, existem diferentes métodos para construir um menu hierárquico no Blogspot. A tabela abaixo compara os três caminhos viáveis para ajudá-lo a escolher a opção mais adequada para a sua necessidade.

Método de Implementação Dificuldade Técnica Flexibilidade Visual Suporte a Submenus Nativo Indicação de Uso
Sintaxe de Prefixo (Lista de Links) Baixa Média Depende do tema (suporta sublinhado _) Iniciantes utilizando temas modernos e responsivos.
Gadget HTML/JavaScript Customizado Média Alta Sim (via tags <ul> e <li> aninhadas) Qualquer tema que permita adição de gadgets no cabeçalho.
Edição Direta no XML do Tema Alta Total Sim (controle total da estrutura de código) Usuários avançados e desenvolvedores de modelos.

Fase Preparatória: Mapeamento de Marcadores e Páginas Estáticas

Antes de escrever qualquer código ou alterar as configurações de layout do seu blog, é indispensável realizar um mapeamento prévio da estrutura do conteúdo. Tentar criar o menu sem organizar previamente os marcadores gera links quebrados e páginas vazias.

1. Padronização dos Marcadores das Postagens

No painel do Blogger, os marcadores são sensíveis a maiúsculas, minúsculas, acentuação e espaços. O marcador "Tecnologia" gerará uma URL diferente de "tecnologia" ou "Tecnologia-Digital". Para evitar duplicidade de páginas de arquivo:

  • Revise os marcadores aplicados às suas postagens no menu "Postagens" do painel.
  • Escolha uma convenção padronizada (exemplo: primeira letra maiúscula, mantendo acentuação correta).
  • Garanta que cada marcador planejado para o menu possua ao menos dois ou três artigos publicados antes de colocá-lo em destaque.

2. Coleta das URLs Exatas

Acesse a versão pública do seu blog, clique sobre os marcadores nas postagens ou no widget lateral de marcadores e copie o endereço completo da barra do navegador. A estrutura típica de um link de marcador no Blogger é a seguinte:

[https://nome-do-seu-blog.blogspot.com/search/label/Nome%20do%20Marcador](https://nome-do-seu-blog.blogspot.com/search/label/Nome%20do%20Marcador)

Nota: O espaço entre as palavras na URL é automaticamente convertido para o código %20 pelo navegador. Você pode utilizar essa URL completa ou optar pelo caminho relativo a partir da barra inicial (/search/label/Nome%20do%20Marcador), que funciona perfeitamente dentro do próprio domínio.

3. Separação entre Páginas Úteis e Categorias de Conteúdo

Um menu hierárquico profissional divide estrategicamente o espaço de navegação. Enquanto o menu superior principal deve abrigar as categorias temáticas do blog (com seus respectivos submenus), a barra secundária ou o rodapé deve conter as páginas estáticas institucionais obrigatórias:

  • Sobre o Autor/Blog: Apresenta a proposta editorial e a autoridade sobre o nicho.
  • Contato: Formulário ou canal direto de comunicação com os leitores.
  • Política de Privacidade: Exigência legal e técnica de plataformas de busca e anúncios.
  • Termos de Uso: Regras de utilização do conteúdo e responsabilidades legais.

Passo a Passo 1: Criando Menu e Submenu com Gadget HTML/JavaScript

Esta é a técnica mais universal para adicionar uma barra de navegação completa com suporte a submenus flutuantes em qualquer modelo do Blogspot. Ela consiste em criar uma estrutura de lista semântica aninhada em HTML e aplicar estilização CSS para transformar a lista em uma barra horizontal interativa.

Etapa A: Adicionando o Gadget no Layout

  1. Acesse o painel administrativo do Blogger.
  2. No menu lateral esquerdo, clique em Layout.
  3. Localize a seção reservada para a navegação principal, geralmente rotulada como Cross-Column, Header Bar ou Nav / Menu.
  4. Clique em Adicionar um Gadget dentro da área desejada.
  5. Na janela flutuante, selecione a opção HTML/JavaScript.
  6. Deixe o campo "Título" em branco (para evitar que uma barra de título indesejada apareça acima do menu).

Etapa B: Inserindo o Código HTML da Lista Hierárquica

No campo "Conteúdo" da caixa do gadget, insira a estrutura HTML do menu. As marcas <ul> representam as listas, enquanto as tags <li> representam os itens. Para criar um submenu, colocamos uma nova lista <ul> dentro de uma tag <li> pai.

Copie e adapte a estrutura abaixo substituindo as URLs de exemplo e os nomes das categorias pelos dados do seu blog:

<nav class="menu-navegacao">
  <ul class="menu-principal">
    <li><a href="/">Início</a></li>
    
    <li class="tem-submenu">
      <a href="/search/label/Tecnologia">Tecnologia</a>
      <ul class="submenu">
        <li><a href="/search/label/Smartphones">Smartphones</a></li>
        <li><a href="/search/label/Notebooks">Notebooks</a></li>
        <li><a href="/search/label/Acessórios">Acessórios</a></li>
      </ul>
    </li>

    <li class="tem-submenu">
      <a href="/search/label/Marketing">Marketing Digital</a>
      <ul class="submenu">
        <li><a href="/search/label/SEO">SEO e Tráfego</a></li>
        <li><a href="/search/label/Redes%20Sociais">Redes Sociais</a></li>
      </ul>
    </li>

    <li><a href="/p/sobre.html">Sobre</a></li>
    <li><a href="/p/contato.html">Contato</a></li>
  </ul>
</nav>

Etapa C: Estilizando o Menu com CSS Customizado

Sem código de estilização, a estrutura exibirá apenas uma lista comum com marcadores de ponto. Para transformar o HTML em um menu profissional com submenu suspenso ao passar o ponteiro do mouse, é necessário adicionar regras CSS ao seu tema.

  1. No painel do Blogger, navegue até Tema.
  2. Ao lado do botão "Personalizar", clique na seta de menu suspenso e selecione Editar HTML ou selecione Personalizar > Avançado > Adicionar CSS.
  3. Se escolher editar via Designer do Tema (Personalizar), insira o bloco de código a seguir no campo de CSS Personalizado:
/* Estilização da Barra de Navegação */
.menu-navegacao {
  background-color: #1a1a1a;
  width: 100%;
  position: relative;
  z-index: 999;
}

.menu-principal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.menu-principal > li {
  position: relative;
}

.menu-principal a {
  display: block;
  padding: 14px 20px;
  color: #ffffff;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.menu-principal a:hover {
  background-color: #333333;
  color: #00a8ff;
}

/* Esconde o Submenu por Padrão */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #262626;
  min-width: 200px;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

.submenu li a {
  padding: 12px 16px;
  color: #cccccc;
  border-bottom: 1px solid #333333;
}

.submenu li a:hover {
  background-color: #383838;
  color: #ffffff;
}

/* Exibe o Submenu ao passar o mouse */
.tem-submenu:hover > .submenu {
  display: block;
}

Após colar o código, salve as alterações. Ao recarregar o blog, a barra de navegação apresentará os tópicos secundários de forma fluida quando o visitante posicionar o cursor do mouse sobre os itens principais.

Passo a Passo 2: Submenus Automatizados via Gadget "Lista de Links" (Sintaxe `_`)

A maioria dos temas modernos e responsivos desenvolvidos especificamente para o Blogger (como templates de distribuidores renomados ou temas focados em AdSense) possui um script interno de automação de menus. Nesses modelos, não é necessário escrever código HTML manualmente para criar submenus; basta utilizar o gadget padrão Lista de Links e aplicar a convenção do sublinhado (underscore _).

Como Funciona a Sintaxe de Prefixo no Blogger?

O script do tema analisa o nome atribuído ao link no painel do widget. Quando ele identifica um caractere de sublinhado antes do nome do item, ele interpreta automaticamente que aquele link pertence ao item imediatamente superior que não possui o prefixo.

  • NomeDoItem (Item de Nível Principal no Menu)
  • _SubItem (Submenu de 1º Nível, subordinado ao item acima)
  • __SubSubItem (Submenu de 2º Nível, subordinado ao subitem acima)

Configurando o Gadget Lista de Links Passo a Passo

  1. Vá em Layout no painel do Blogger.
  2. Localize o gadget referente ao menu principal (frequentemente batizado de Main Menu, Navigation Menu ou Header Menu) e clique no ícone de lápis para Editar.
  3. Na janela que se abre, clique em Adicionar um novo item.
  4. Preencha os campos com os dados das suas categorias respeitando a hierarquia desejada:

Exemplo Prático de Preenchimento de Itens:

Item 1 (Principal):
Nome do site: Home
URL do site: [https://seublog.blogspot.com/](https://seublog.blogspot.com/)

Item 2 (Categoria Pai):
Nome do site: Finanças
URL do site: [https://seublog.blogspot.com/search/label/Finan%C3%A7as](https://seublog.blogspot.com/search/label/Finan%C3%A7as)

Item 3 (Subcategoria de Finanças - Prefixo de 1 sublinhado):
Nome do site: _Investimentos
URL do site: [https://seublog.blogspot.com/search/label/Investimentos](https://seublog.blogspot.com/search/label/Investimentos)

Item 4 (Subcategoria de Finanças - Prefixo de 1 sublinhado):
Nome do site: _Cartões de Crédito
URL do site: [https://seublog.blogspot.com/search/label/Cart%C3%B5es](https://seublog.blogspot.com/search/label/Cart%C3%B5es)

Item 5 (Categoria Pai):
Nome do site: Tecnologia
URL do site: [https://seublog.blogspot.com/search/label/Tecnologia](https://seublog.blogspot.com/search/label/Tecnologia)

Item 6 (Subcategoria de Tecnologia):
Nome do site: _Aplicativos
URL do site: [https://seublog.blogspot.com/search/label/Aplicativos](https://seublog.blogspot.com/search/label/Aplicativos)

  1. Certifique-se de manter a ordem exata dos itens. O subitem pré-fixado com _ deve ficar obrigatoriamente posicionado abaixo da categoria pai a que pertence. Utilize as setas de reordenação do gadget caso precise alterar a sequência.
  2. Clique em Salvar na caixa do gadget e, em seguida, salve as alterações gerais do Layout no canto inferior da tela.

Passo a Passo 3: Adicionando o Menu Diretamente no Código XML do Tema

Para quem deseja independência total em relação a gadgets do painel ou quer otimizar ao máximo o tempo de carregamento da página reduzindo requisições extras de JavaScript, a criação do menu direto no código XML do tema é a solução ideal.

1. Realize o Backup de Segurança do Modelo

Qualquer modificação no arquivo XML do Blogger pode desestruturar a exibição do seu blog caso haja algum erro de marcação. Por isso, nunca pule o procedimento de segurança:

  • Acesse a aba Tema no painel.
  • Clique na seta ao lado de "Personalizar" e escolha Fazer Backup.
  • Faça o download do arquivo .xml para o seu computador. Caso algo saia errado, basta restaurar este arquivo salvo.

2. Editando o Código Fonte do Tema

  1. Na mesma seta do menu "Personalizar", clique em Editar HTML.
  2. Clique dentro da área de código e pressione Ctrl + F (ou Cmd + F no Mac) para abrir a caixa de pesquisa interna.
  3. Procure pela tag de fechamento do cabeçalho ou pela seção de navegação digitando termos como </header>, id='header' ou class='header-nav'.
  4. Logo abaixo da estrutura de cabeçalho do blog, cole a marcação semântica HTML com os links das suas categorias, utilizando classes CSS próprias para evitar conflitos com outros elementos do tema.
<!-- Inicio da Barra de Navegacao Nativa -->
<div class='nav-wrapper'>
  <div class='content-container'>
    <nav id='primary-menu'>
      <ul>
        <li><a expr:href="data:blog.homepageUrl">Início</a></li>
        <li class='has-children'>
          <a href="/search/label/Saude">Saúde e Bem-Estar</a>
          <ul class='child-menu'>
            <li><a href="/search/label/Nutricao">Nutrição</a></li>
            <li><a href="/search/label/Exercicios">Exercícios</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Fim da Barra de Navegacao -->

Note que o trecho expr:href="data:blog.homepageUrl" é um código nativo do Blogger que insere dinamicamente a URL da página inicial do seu blog, eliminando a necessidade de alterar manualmente esse link caso o domínio do blog mude no futuro.

Garantindo a Responsividade e Navegabilidade em Dispositivos Móveis

Mais da metade dos acessos a blogs modernos é realizada por meio de smartphones. Um menu de navegação que funciona perfeitamente no computador com o movimento do mouse pode apresentar sérios problemas de usabilidade em telas sensíveis ao toque se não for ajustado para navegação mobile.

O Problema do Evento de Ponteiro (Hover vs Click)

Em computadores de mesa, o submenu é ativado pela pseudo-classe CSS :hover (quando o mouse passa por cima do link). Em dispositivos móveis não existe o cursor flutuante. Quando o usuário toca em uma categoria pai, o navegador tenta simultaneamente abrir o link da categoria e exibir o submenu, resultando em uma experiência confusa e indesejada.

Soluções para uma Boa Experiência Mobile

  • Categorias Pai sem Link Direto: Se o seu menu depende exclusivamente de CSS sem JavaScript para celulares, você pode atribuir href="#" ou href="javascript:void(0);" à categoria pai no código, fazendo com que o primeiro toque do usuário apenas abra o submenu.
  • Ícones de Expansão (Seta/Toggle): A melhor prática de design consiste em separar o link da categoria pai de um botão lateral dedicado (geralmente uma seta para baixo). Clicar no texto da categoria conduz o leitor para a página geral, enquanto tocar na seta expande os subitens ocultos.
  • Dimensões Adequadas para o Toque: Certifique-se de que a altura de cada item do menu e dos submenus no mobile tenha pelo menos 44px a 48px de área clicável. Links muito próximos causam toques acidentais em itens errados.
  • Tratamento do Eixo Z (z-index): Verifique se a camada do submenu suspenso possui um valor de z-index suficientemente alto no CSS (exemplo: z-index: 9999;). Caso contrário, os elementos de mídia do artigo, sliders ou banners de anúncio posicionados logo abaixo do cabeçalho poderão ficar por cima do menu quando ele for desdobrado.

Estruturação Estratégica da Hierarquia (SEO Semântico e AdSense)

A criação da hierarquia do menu não deve atender apenas a critérios estéticos; ela precisa refletir a estratégia semântica do seu projeto de conteúdo para maximizar os resultados nos motores de busca e na aprovação de programas de monetização.

1. Aplicação da Regra dos 3 Cliques

Na arquitetura de informação voltada para SEO, nenhuma página relevante ou subcategoria importante deve estar a mais de três cliques de distância da página inicial. Uma estrutura com submenus rasos (máximo de 2 níveis: Categoria Pai > Subcategoria Filho) garante que os robôs do Google consigam rastrear e indexar todo o acervo do blog sem esgotar o orçamento de varredura (crawl budget).

2. Escolha dos Textos Âncora (Anchor Text)

Os nomes exibidos nos botões do menu devem ser claros e conter as palavras-chave principais do segmento do seu blog. Evite termos genéricos ou subjetivos no menu. Em vez de utilizar "Outros" ou "Variados", utilize nomes específicos e descritivos como "Acessórios de Celular" ou "Dicas de Estudo". Isso fornece contexto semântico imediato aos algoritmos de busca.

3. Eliminação de Categorias Vazias ou Canibalizadas

Um erro frequente ao planejar um submenu é criar divisões detalhadas demais para um blog que ainda possui poucas postagens. Se a sua subcategoria "Acessórios" possui apenas um artigo, não há justificativa técnica para mantê-la como um item separado no menu suspenso. Agrupe os conteúdos em seções abrangentes até que haja um volume razoável de artigos (ao menos 5 a 10 postagens) para justificar a criação de uma subcategoria dedicada.

Erros Comuns ao Estruturar Menus no Blogger e Como Evitá-los

Durante a implementação de submenus no Blogspot, é comum encontrar pequenos obstáculos técnicos que impedem o correto funcionamento do sistema. A lista abaixo reúne as falhas mais frequentes e como corrigi-las rapidamente:

  • Erro 1: Página 404 ao clicar nos itens do submenu.
    Causa: Erro na digitação do nome do marcador na URL (diferença entre maiúsculas e minúsculas) ou ausência de codificação de caracteres especiais.
    Solução: Copie o endereço diretamente da barra do navegador acessando a página do marcador no blog público, em vez de digitar o link manualmente.
  • Erro 2: Submenu abrindo por trás das imagens ou de anúncios do blog.
    Causa: Conflito no ordenamento de camadas no CSS (propriedade z-index ausente ou com valor inferior aos elementos da página).
    Solução: Adicione a regra z-index: 9999; e position: relative; no container do menu principal.
  • Erro 3: Menu desconfigurado na exibição mobile.
    Causa: O tema possui uma opção de "Menu Mobile" separada que não herda as alterações feitas no layout do computador.
    Solução: Verifique na aba Layout do Blogger se existe um gadget exclusivo nomeado como Mobile Menu ou Off-Canvas Menu e aplique a mesma estrutura de links nele.
  • Erro 4: Submenu não abre no celular ao ser tocado.
    Causa: Dependência exclusiva do evento :hover do CSS, que não funciona nativamente em telas de toque.
    Solução: Adapte o link pai para não redirecionar imediatamente ou utilize temas que ofereçam suporte JavaScript nativo para o acionamento via toque.
  • Erro 5: O menu quebra o layout em telas de menor resolução.
    Causa: Excesso de itens de primeiro nível no menu horizontal, forçando a quebra de linha do container.
    Solução: Limite o menu principal a no máximo 6 ou 7 categorias "pai" e redistribua os demais tópicos dentro dos submenus verticais.

Checklist Prático Antes de Publicar o Menu

Antes de considerar a nova hierarquia do seu blog totalmente pronta, execute esta verificação técnica final em diferentes dispositivos e navegadores:

  • [ ] Todos os links do menu e dos submenus foram testados e estão abrindo as páginas corretas sem retornar erro 404?
  • [ ] Os marcadores vinculados possuem artigos ativos publicados?
  • [ ] O menu suspenso (submenu) expande e recolhe suavemente ao passar o mouse no computador?
  • [ ] As páginas estáticas obrigatórias (Sobre, Contato, Privacidade) estão acessíveis no menu ou no rodapé?
  • [ ] A barra de navegação foi testada em uma tela de smartphone e permite acessar os subitens sem dificuldades?
  • [ ] O menu não corta o conteúdo lateral da tela em resoluções menores?
  • [ ] O arquivo XML do tema foi salvo em um backup prévio de segurança?

Perguntas Frequentes

É possível criar submenus no Blogspot sem aprender programação HTML ou CSS?

Sim. Se você utilizar um tema moderno que suporte a convenção do sublinhado (_) no gadget "Lista de Links", todo o processo é feito graficamente pelo painel do Blogger em Layout. Basta adicionar os itens inserindo um sublinhado antes do nome do link para indicar que ele é um subitem de um menu suspenso.

Por que o meu submenu não aparece quando passo o ponteiro do mouse sobre a categoria principal?

Isso ocorre quando a regra CSS responsável pela exibição (geralmente .tem-submenu:hover > .submenu { display: block; }) não foi adicionada ao tema, ou quando o submenu não está configurado com a propriedade position: absolute dentro de um container com position: relative.

Qual é a quantidade ideal de níveis de submenus que devo utilizar no meu blog?

O recomendado é utilizar no máximo dois níveis de profundidade no menu (Categoria Pai > Subcategoria Filho). Criar sub-submenus (terceiro nível em diante) prejudica a usabilidade em dispositivos móveis e torna o rastreamento do site mais lento para os robôs dos mecanismos de busca.

Qual é a diferença entre usar caminhos de URL relativos ou absolutos nos links do menu?

URLs absolutas incluem o protocolo e o domínio completo (exemplo: [https://seublog.blogspot.com/search/label/SEO](https://seublog.blogspot.com/search/label/SEO)), enquanto URLs relativas iniciam a partir da barra (exemplo: /search/label/SEO). Ambos funcionam perfeitamente, mas os caminhos relativos oferecem a vantagem de continuar funcionando sem alterações mesmo se você trocar o domínio gratuito do Blogspot por um domínio customizado .com.br no futuro.

A organização do menu e dos submenus interfere na aprovação do Google AdSense?

Sim, de forma direta. A equipe de análise do Google AdSense exige que o site possua um sistema claro de navegação que permita aos avaliadores e aos usuários navegar livremente pelas seções do site. Erros comuns de navegação, como links que não levam a lugar nenhum, botões sem ação ou ausência de uma estrutura de categorias bem definida, são motivos frequentes para reprovação sob a política de "Navegação do site difícil".

Conclusão

Organizar a navegação do seu blog no Blogspot criando uma hierarquia clara de menus e submenus é um dos passos mais importantes para profissionalizar o seu projeto digital. Além de transformar a experiência de leitura do visitante, uma estrutura bem desenvolvida facilita o trabalho de indexação dos mecanismos de busca e consolida os pré-requisitos técnicos exigidos pelas plataformas de monetização.

Escolha o método mais adequado ao seu nível de conhecimento: utilize a simplicidade do gadget "Lista de Links" com sintaxe de sublinhado caso seu modelo ofereça esse recurso, ou implemente o bloco customizado via gadget "HTML/JavaScript" para obter controle total sobre a apresentação visual e a responsividade. Ao concluir as alterações, valide todos os acessos no seu dispositivo móvel para garantir uma navegação rápida, fluida e acessível em qualquer tela.

Próximo artigo Artigo anterior