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