Como adicionar um botão "Voltar para o topo" no Blogger e WordPress

Para aqueles blogs que possuem uma grande quantidade de artigos em uma mesma página tornando-as assim bem extensas, um botão “voltar ao topo da página” cairia muito bem. Desta forma você pouparia o leitor de rolar a página novamente até o início substituindo esta ação por um simples clique no botão “voltar ao topo”.

Vamos utilizar um script que torna o efeito de subida deslizante, acrescentando muito mais estilo a função. Veja adiante como acrescentar o botão no Blogger e WordPress.

INSERIR BOTÃO VOLTAR AO TOPO NO BLOGGER

Como praxe, antes de iniciar aconselho fazer um backup prévio do template do seu blog, assim você poderá evitar muitos problemas no futuro.

• Como fazer um backup do template no blogger

Em seguida vá em Modelo -> Editar HTML e procure (CTRL+F) pela tag “</body>” (sem aspas).

Após localizá-la adicione o trecho abaixo ANTES da tag acima.

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){ 
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

Agora procure pelo trecho “</head>” e cole ANTES dela o seguinte JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Salve.

Escolha um local para adicionar o botão geralmente inserido no rodapé do template, para isso busque novamente pela tag de encerramento “</body>” (sem aspas) e adicione o código seguinte DEPOIS dela:

<a href="#" id="subir">Topo da Página ↑</a>

INSERIR BOTÃO VOLTAR AO TOPO NO WORDPRESS

O processo descrito acima é basicamente o mesmo no wordpress.

1. Abra o ficheiro “footer.php” do seu blog e localize a tag “</body>“.

2. Acrescente o código abaixo ANTES da tag acima:

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){ 
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

3. Agora abra o ficheiro “header.php” e cole o JavaScript abaixo antes da tag “</head>“:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

4. Localize um local preferencial para a inserção do botão, caso opte pelo rodapé, abra o ficheiro “footer.php” e cole o código abaixo depois da tag “</body>“.

<a href="#" id="subir">Topo da Página ↑</a>

Demo: Topo da Página ↑

Qualquer dúvida deixe um comentário abaixo.