Cadernizando: Como Adicionar Botão Flutuante no Blog?

CONSIDERAÇÕES INICIAIS

Os botões flutuantes são imagens no canto da tela do blog com link para realização de funções especiais ou para acessar endereços eletrônicos importantes. Nesse tutorial, confira como adicionar um botão flutuante no blog com link para retornar ao topo da página.

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 BOTÃO FLUTUANTE NO BLOG?

Confira como adicionar um botão flutuante no seu blog com link para retornar ao topo da página em 12 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 abaixo:

</body>

Clique aqui para copiar o trecho acima.

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

9º Passo: acima do trecho pesquisado, escreva o código:

<div style='float:right;'>

<a href='#'>

<img src='URL DA IMAGEM' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='Topo'/>

</a>

</div>

Clique aqui para copiar o código acima.

10º Passo: substitua o trecho URL DA IMAGEM pelo URL da imagem desejada.

O HTML do seu blog era assim:

</script>

</body>

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

</script>

<div style='float:right;'>

<a href='#'>

<img src='URL DA IMAGEM' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='Topo'/>

</a>

</div>

</body>

Depois que substituir o URL da imagem, vai ficar assim:

</script>

</a>

</div>

</body>

Se não tiver uma imagem pronta, utilize o URL de uma das nossas imagens. Para tanto, clique numa das imagens abaixo para obter o URL e substituir no trecho URL DA IMAGEM no código do botão flutuante.

Dica: para obter o URL de uma imagem salva no seu computador, abra uma nova guia no navegador, acesse a página inicial do Blogger, clique em Página e depois em Nova Página. A seguir, clique em Inserir Imagem, escolha a opção fazer upload do computador, clique em Procurar, selecione a imagem desejada e clique em Abrir. Após o carregamento da imagem, clique nela para selecioná-la e note deve aparecer um menu flutuante abaixo dela. Nesse menu, clique sobre a opção alterar (ou no ícone de uma engrenagem). Na janela seguinte, selecione a opção tamanho original e clicar em Atualizar. Em seguida, altere a visualização do conteúdo da página para o modo de Visualização em HTML (clique sobre o ícone de um lápis ou dos sinais <>). Por fim, selecione e copie o URL da imagem inserida e depois substitua no trecho URL DA IMAGEM, no código do atual tutorial.

Em caso de dúvidas sobre a localização do URL da imagem, após alterar o modo de visualização para HTML, clique em qualquer local do HTML exibido, pesquise pelo trecho src= e pressione a tecla Enter. Ao localizar o trecho src= no HTML, note que em seguida haverá um endereço eletrônico entre duas aspas, como no exemplo: src="https://blogger.exemplo-de-url.jpg" />. Então, o trecho que está entre as aspas é o URL da imagem.

Se ainda tiver dúvida 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: clique em visualizar para conferir o resultado.

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

É 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.

É possível substituir o trecho topo por qualquer texto. Esse trecho equivale ao título que aparece quando o cursor é passado por cima do botão e todo o texto dentro das aspas pode ser livremente alterado como nos exemplos a seguir: title='Topo'/, title='Deslocamento'/, title='Ir para cima'/, entre outros.

É possível adicionar o código dos botões flutuantes no HTML do blog várias vezes para elaborar um conjunto de botões ou imagens flutuantes.

COMO ADICIONAR UM LINK NO BOTÃO FLUTUANTE?

O código do botão flutuante disponibilizado possui um link com a função de retornar ao topo da página. No entanto, é possível alterar esse link para uma página interna ou uma página externa do blog, como por exemplo, adicionar um link para uma rede social.

Para adicionar um link no botão, substitua o trecho # pelo URL do link desejado, como por exemplo:

Para adicionar um link com a filtragem das postagens com uma palavra específica em seu blog, substitua o trecho # pelo termo search?q= mais o nome do termo que será filtrado, como nos exemplos a seguir:

Para adicionar um link com a filtragem das postagens com um marcador específico no seu blog, substitua o trecho # pelo termo label/ mais o nome do marcador, como nos exemplos a seguir:

Também é possível adicionar um link para uma página interna do blog, utilizando apenas o final dos URLS, como por exemplo:

Para abrir os links em uma nova guia, adicione o atributo target="_blank" na tag <a href='#'>, como por exemplo:

Clique aqui para copiar o atributo target="_blank".

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre o uso de um botão flutuante no blog com link para retornar ao topo da página, entre outras funcionalidades.

Por: Santos. Elaborado em: 15/12/2025. Publicado em: 15/12/2025. Atualizado em: 22/01/2026.

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

Como Adicionar Botão Flutuante no Blog?

Nenhum comentário:

Postar um comentário