Como Adicionar um Menu Abaixo do Rodapé do Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um menu horizontal abaixo do rodapé do blog. Dessa forma, é possível utilizar esse menu para disponibilizar alguns links de atalho para as principais páginas publicadas no blog e para as redes sociais.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

COMO ADICIONAR UM MENU ABAIXO DO RODAPÉ?

Confira como adicionar um menu horizontal de atalhos abaixo do rodapé do seu blog em 14 passos:

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

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

5º Passo: clique em qualquer local dentro do HTML do blog.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho: </body>

</body>

8º Passo: clique antes desse trecho e pressione a tecla Enter para inserir uma linha em branco acima dele.

9º Passo: copie o código abaixo e cole acima do trecho pesquisado.

<div face='Arial, sans-serif' style='font-size: 10pt; text-align: center; background:#e3e3e3 url(URL_DA_IMAGEM) top center repeat;'><a href='#'>Início</a> | <a href='#'>Sobre</a> | <a href='#'>Contato</a> | <a href='#'>Topo</a></div>

O HTML do seu blog era assim:

</script> </body>

Depois que colar o código, vai ficar assim:

</script> <div face='Arial, sans-serif' style='font-size: 10pt; text-align: center; background:#e3e3e3 url(URL_DA_IMAGEM) top center repeat;'><a href='#'>Início</a> | <a href='#'>Sobre</a> | <a href='#'>Contato</a> | <a href='#'>Topo</a></div> </body>

10º Passo: substitua o trecho URL_DA_IMAGEM pelo URL da imagem que será exibida no plano de fundo do menu.

Dica: caso tenha dúvidas sobre como obter o URL de uma imagem salva no seu computador, clique aqui e acesse o tutorial como alterar o plano de fundo das postagens e dos widgets do blog. Os 15 primeiros passos desse tutorial mostram detalhadamente como enviar uma imagem para o Blogger e obter a URL dessa imagem.

11º Passo: substitua os trechos Início, Sobre e Contato pelos nomes que serão exibidos em cada link.

Observação: esse menu possui um total de quatro links separados por barra.

12º Passo: substitua cada trecho # pelo URL de cada link.

Dica: o último link, nomeado como topo, deixe o trecho href='#' sem alteração para ter um atalho com a função de subir ao topo da página.

13º Passo: clique em visualizar para conferir o resultado.

14º Passo: se o resultado for satisfatório, clique em Salvar para finalizar.

 

Para remover o plano de fundo personalizado do menu, apague o trecho background:#e3e3e3 url(URL_DA_IMAGEM) top center repeat;. Após apagar o trecho mencionado, o plano de fundo do blog será mostrado no local do plano de fundo do menu.

Observação: ao apagar o trecho supramencionado, só deve ter cuidado para não apagar a aspa simples que vem após o trecho.

Caso tenha interesse em deixar apenas uma cor sólida no plano de fundo, também é possível apagar o trecho url(URL_DA_IMAGEM) top center repeat.

Observação: ao apagar o trecho anterior, só deve ter cuidado para não apagar o ponto e vírgula que aparece após o trecho.

Para alterar a cor de fundo do menu que aparece abaixo da imagem, deve alterar o código #e3e3e3 (prata) pelo código hexadecimal da cor desejada, como por exemplo, #fff (branco), #000 (preto), #00a2ff (azul), #00ff7e (verde), #ff0000 (vermelho), #ff7e00 (laranja), #fe60e6 (rosa), #ffde00 (amarelo), entre outras. Para obter mais códigos hexadecimais de cores para o menu do seu blog, clique aqui.

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos acerca do uso de um menu horizontal de atalhos abaixo do rodapé do blog.

 

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