Arquivos do Website:

Como colocar no blog um botão voltar ao topo da página?


Rolar longas páginas de blogs ou sites é uma tarefa muito cansativa e estressante para os usuários... caso o seu blog ou site tenha uma página muito longa, a melhor forma de amenizar esta situação é instalando um link ou um botão de link com a opção de voltar ao topo da página com apenas um clique!



Imagem: RonanW Humberto do Lago Müller - Wikipédia.

Temos um novo artigo que ensina a colocar um botão muito mais bonito do que este, no template do seu blog!

Veja como é bem simples instalar qualquer uma das opções na sua página... os códigos são bem pequenos e não interferem no carregamento da página do seu blog (Em blogs hospedados na plataforma Blogger, eu sei que funciona, só não sei se funciona em blogs WordPress.org, entre outros)! As partes destacadas na cor azul, nos códigos abaixo podem ser editadas! A primeira opção é apenas um link de texto:

<a style="display:scroll;position:fixed;bottom:3px;right:3px;"href="#" title="Topo do blog"><b>Voltar ao Topo</b></a>

Basta você copiar o código acima e colar num elemento de página do seu blog (Dicas para blogs do Blogger) Vá ao novo painel de controle do Blogger ==> Localize a opção Layout (está escondida num menu expansível, indicado por uma seta que aponta para baixo, ao lado esquerdo do link Visualizar blog). ==> Escolha a opção Adicionar um Gadget ==> Escolha a opção HTML/JavaScript ==> Cole o código dentro do gadget e clique em Salvar.

Você pode fazer algumas personalizações no código, veja:

Bottom 3px = Posição do botão relativa ao rodapé do blog;
Right 3px = Botão flutuando à direita com margem de 3 pixels de distância relativa à lateral do blog (Obs: para o botão ou link flutuar à esquerda, troque "right" por "left");
Topo do blog = Texto oculto, só aparecerá quando alguém pousar o cursor do mouse sobre o link ou imagem do botão (Você pode trocá-lo por qualquer outro texto de sua preferência, este é apenas um exemplo);
Voltar ao Topo = Texto que ficará visível na página do seu blog, pode ser substituído por qualquer texto de sua preferência (ex: topo, top, voltar etc);

Neste outro código temos um botão com imagem; primeiro você precisa hospedar a sua imagem num servidor, copiar o link da imagem e depois colar no local indicado no código abaixo:

<a style="display:scroll;position:fixed;bottom:3px;right:3px;"href="#" title="Topo da pagina"><img src="Link da sua imagem aqui!"/></a>

Você pode hospedar a sua imagem no próprio blog, é mais seguro. Leia o artigo como hospedar imagens no blog?
O procedimento de personalização e instalação do código no blog é o mesmo, basta seguir as instruções acima. A única parte que muda no código é a parte do texto visível, que aparece no primeiro código sem imagem; que neste último caso é substituído por uma imagem.