Como Adicionar um Menu Suspenso no Blog

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um menu suspenso no blog para organizar uma lista de links de forma prática e compacta, conforme o exemplo abaixo.

  Acesso rápido Como adicionar um menu suspenso numa postagem do blog? Como adicionar um menu suspenso num widget do blog? Considerações finais Comentários

O menu suspenso pode ser utilizando para organizar e compactar links de ancoragem, links internos ou links externos, inclusive para acesso às redes sociais.

COMO ADICIONAR UM MENU SUSPENSO NUMA POSTAGEM DO BLOG?

Confira como adicionar um menu suspenso em uma postagem do seu blog em 09 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: acesse a página de edição da postagem desejada.

4º Passo: altere o modo de exibição do conteúdo para visualização em HTML.

Se não aparecer o nome visualização, clique no ícone de um lápis e selecione o ícone dos sinais <>.

5º Passo: encontre o local que deseja inserir o menu suspenso.

6º Passo: clique no local desejado e escreva o código abaixo:

<select id="menuSusp" onchange="window.location.href=this.value;">

  <option value="#">1</option>

  <option value="#">2</option>

  <option value="#">3</option>

  <option value="#">4</option>

  <option value="#">5</option>

</select>

Clique aqui para copiar o código acima.

Observação: o trecho <option value="#">5</option> corresponde a cada opção disponível na lista do menu suspenso, na qual, o símbolo # indica o local do URL do link e o número indica o nome do URL.

Dica: para aumentar o número de opções do menu suspenso, adicione outros trechos do tipo <option value="#">5</option> abaixo dos já existentes. Para diminuir o número de opções, remova os trechos existentes que estão em excesso.

7º Passo: altere cada trecho # pelo URL do link desejado.

Exemplo:

<option value="#">1</option>

<option value="http://meublog.blogspot.com/p/contato.html">1</option>

8º Passo: altere cada número pelo nome do link.

<option value="#">1</option>

<option value="http://meublog.blogspot.com/p/contato.html">Contato</option>

9º Passo: por fim, clique em Atualizar e confira o resultado diretamente no seu blog.

 

 

Para adicionar um link de ancoragem, primeiramente adicione os pontos de ancoragem no blog utilizando o código <div id="nomedaancora"></div>. Em seguida, no código do menu suspenso, adicione o nome da ancora após o trecho #, conforme os exemplos abaixo.

Exemplos:

<option value="#">1</option>

<option value="#nomedaancora">Nome do link</option>

Se tiver alguma dúvida sobre como inserir links de ancoragem, clique aqui e confira um tutorial mostrando detalhadamente como adicionar links de ancoragem no blog.

 

Para adicionar um link interno, copie o URL de uma página específica do seu blog e substitua no local do trecho #.

Exemplo:

<option value="#">1</option>

<option value="http://meublog.blogspot.com/p/sobre.html">Sobre</option>

 

Para adicionar um link externo, copie o URL do site desejado e substitua no local do trecho #.

Exemplo:

<option value="#">1</option>

<option value="http://meusite.com.br/">Meu site</option>

 

Para adicionar um link externo para uma rede social, copie o URL da rede social e substitua no local do trecho #.

Exemplos:

<option value="#">1</option>

<option value=" https://www.instagram.com/cadernizando/">Instagram</option>

 

COMO ADICIONAR UM MENU SUSPENSO NUM WIDGET DO BLOG?

 

Confira como adicionar um menu suspenso em um widget do seu blog em 09 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em layout.

4º Passo: clique em adicionar um gadget.

5º Passo: selecione o gadget HTML/JavaScript.

6º Passo: na janela seguinte, deixe o campo título em branco e preenche o campo conteúdo com o código do menu suspenso disponibilizado no procedimento anterior.

7º Passo: personalize o código do menu suspenso conforme suas necessidades e clique em salvar.

8º Passo: arraste o widget com o menu suspenso para o local desejado.

9º Passo: por fim, na página do layout, clique em salvar para confirmar a organização dos widgets.

Caso não apareça o nome salvar, clique no ícone de um disquete na parte inferior da tela.

 

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a elaboração de menu suspenso nas postagens e nos widgets do blog para organizar de forma compacta uma lista de links.

 

TUTORIAIS RELACIONADOS

 

Por: Santos. Elaborado em: 25/12/2025. Publicado em: 25/12/2025. Atualizado em: 25/12/2025. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.