Cadernizando: Como adicionar um botão com menu flutuante no blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um botão para exibir e ocultar um menu flutuante no blog com uma lista de links para as principais páginas publicadas.

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.

SOBRE O MENU FLUTUANTE

O código apresentando neste tutorial deve adicionar um botão no canto superior esquerdo da tela do seu blog com a função de exibir e ocultar um menu com uma lista de links no seu blog. Vale ressaltar que existem diversos outros tipos de códigos para adicionar um menu flutuante no blog com funções mais modernas e sofisticas. No entanto, o código apresentado é significativamente simples, leve e prático, além de ser compatível em diversos layouts mais antigos.

O código do menu flutuante disponível neste tutorial possui três links e uma caixa de pesquisa. Porém, é possível personalizar a quantidade de links e de elementos dentro do menu conforme as suas necessidades.

COMO ADICIONAR O MENU FLUTUANTE NO BLOG?

Confira como adicionar o menu flutuante no seu blog em 13 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 style='float:right;'>
<div style='-moz-border-radius: 5px; -webkit-border-radius: 10px; background: linear-gradient(300deg, #aeaeae, #aeaeae, #ffffff); border-radius: 10px; border: 1px solid #4b4b4c; color: black; padding: 10px; display:scroll; position:fixed; top:5px; left:5px; box-shadow: 0px 0px 3px #ffffff; '>
<div class='divspoiler' title='Menu'>
<a href='javascript:void(0);' onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}'>☰</a>
</div><div><div class='spoiler' style='display: none;'>
<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph;'><span face='"Arial",sans-serif' style='font-size: 13pt; line-height: 150%;'><a href='URL_DO_LINK' title='Início'>Início</a><o:p/></span></p>
<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph;'><span face='"Arial",sans-serif' style='font-size: 13pt; line-height: 150%;'><a href='URL_DO_LINK' title='Sobre'>Sobre o blog</a><o:p/></span></p>
<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph;'><span face='"Arial",sans-serif' style='font-size: 13pt; line-height: 150%;'><a href='URL_DO_LINK' title='Contato'>Contato</a><o:p/></span></p>
<form action='/search' class='gsc-search-box' method='get'>
<b:attr cond='not data:view.isPreview' name='target' value='_top'/>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td>
<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='Pesquisar' type='text'/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' expr:value='data:messages.search' title='Pesquisar' type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph; font-family: times; color: #4b4b4c;'><span style='font-size: 13pt; line-height: 150%;'><i>Para fechar este menu, clique em ☰.</i><o:p/></span></p>
</div>
</div>
</div></div>

10º Passo: substitua os trechos início, sobre e contato pelo texto que será exibido em cada link.

11º Passo: substitua cada trecho URL_DO_LINK pelo URL do respectivo link.

Observação: observe se o URL do link está inserido entre aspas, conforme o exemplo abaixo:

Exemplo: href='http://meublog.com/'

O HTML do seu blog era assim:

</script>

</body>

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

</script>

<div style='float:right;'>

<div class='divspoiler' title='Menu'>

</div><div><div class='spoiler' style='display: none;'>

<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph;'><span face='"Arial",sans-serif' style='font-size: 13pt; line-height: 150%;'><a href='URL_DO_LINK' title='Início'>Início</a><o:p/></span></p>

<form action='/search' class='gsc-search-box' method='get'>

<b:attr cond='not data:view.isPreview' name='target' value='_top'/>

<table cellpadding='0' cellspacing='0' class='gsc-search-box'>

<tbody>

<tr>

<td>

<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='Pesquisar' type='text'/>

</td>

<td class='gsc-search-button'>

<input class='gsc-search-button' expr:value='data:messages.search' title='Pesquisar' type='submit'/>

</td>

</tr>

</tbody>

</table>

</form>

<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph; font-family: times; color: #4b4b4c;'><span style='font-size: 13pt; line-height: 150%;'><i>Para fechar este menu, clique em ☰.</i><o:p/></span></p>

</div>

</div></div>

</body>

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

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

O código do botão disponível na presente página é uma combinação de outros quatro códigos: um elemento de flutuação, uma tabela, uma função JavaScript e uma caixa de pesquisa.

É possível substituir a posição fixed por absolute ou relative.

Fixed: o botão fica fixo na tela.

Absolute: o botão fica sobreposto em um local do blog.

Relative: o botão fica depois dos elementos naturais do blog.

É possível substituir o trecho bottom por top.

Bottom: o botão fica alinhado na parte inferior da tela.

Top: o botão fica alinhado na parte superior da tela.

É possível substituir o trecho right por left.

Right: o botão fica alinhado no lado direito da tela.

Left: o botão fica alinhado no lado esquerdo da tela.

Para adicionar mais links no menu, deve copiar o código abaixo e colar acima da tag que inicia com o trecho <form action.

<p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph;'><span face='"Arial",sans-serif' style='font-size: 13pt; line-height: 150%;'><a href='URL_DO_LINK' title='Clique aqui'>TEXTO_DO_LINK</a><o:p/></span></p>

Para remover a caixa de pesquisa, deve apagar todas as linhas da tag <form action até a </form>.

Para remover a mensagem abaixo da caixa de pesquisa, deve remover o trecho seguinte: <p class='MsoNormal' style='line-height: 150%; text-align: justify; text-justify: inter-ideograph; font-family: times; color: #4b4b4c;'><span style='font-size: 13pt; line-height: 150%;'><i>Para fechar este menu, clique em ☰.</i><o:p/></span></p>

O atributo title equivale ao texto que é exibido quando o cursor do mouse é passado por cima do link. Para alterar esse texto, deve modificar o trecho dentro das aspas do atributo, como nos exemplos a seguir: title='Início', title='Sobre', title='Contato', entre outros.

COMO PERSONALIZAR A CAIXA DE PESQUISA?

Para personalizar as cores e o tamanho da caixa de pesquisa inserida no meu flutuante, repita o procedimento acima, alterando o sétimo e o nono passo.

7º Passo: pesquise pelo trecho: /* Content

/* Content

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 CSS abaixo e cole acima do trecho pesquisado.

/* Busca
----------------------------------------------- */

.gsc-search-box {
    font-style: arial;    
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px;
    background:transparent;
    background-color:transparent;
}

.gsc-input {
    background-color: #ffffff;
    border: 1px solid #8c97bb !important;
    border-radius: 4px;
    width: 110px !important;
    height: 30px;
}

.gsc-input:hover {
    border: 1px solid #717eab !important;
    box-shadow: 0px 0px 7px #acacad;
}

input.gsc-search-button {
    margin-top: 10px;
    background: linear-gradient(345deg, #c9c9cb, #dadadd) !important;
    color: black;
    border: none;
    cursor: pointer;
    border: 1px solid #8c97bb !important;
    border-radius: 4px;
    width: 120px;
    height: 30px;
}

input.gsc-search-button:hover {
    border: 1px solid #717eab !important;
    box-shadow: 0px 0px 7px #acacad;
    background: linear-gradient(345deg, #97b0b9, #e1e5e7) !important;
    text-shadow: 0px 0px 5px #fff;
}

Observação: para a personalização da caixa de pesquisa do menu flutuante ficar diferente da caixa de pesquisa nativa do blog, altere os trechos gsc-search-box, gsc-input, como por exemplo, gsc-search-box2, gsc-input2, na qual, o mesmo trecho digitado no código da caixa de texto deve está igual ao digitado no código CSS.

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos acerca do uso de um botão com menu flutuante no blog com links de acesso às principais páginas publicadas no blog, entre outras funcionalidades.

Por: Santos. Elaborado em: 23/02/2026. Publicado em: 23/02/2026. Atualizado em: 23/02/2026.

Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.

Como adicionar um botão com menu flutuante no blog?

Nenhum comentário:

Postar um comentário