Adicione botão "leve-me para cima" (scroll to top)

Sabe aquele botãozinho legal que aparece no lado de alguns blogs? Aquele que quando você clica ele te leva pra cima da página? Então, hoje vou ensinar a fazer um botão desses. Ele é conhecido como "Scroll to top". 

1. Como sempre, faça o backup do seu template.

2. No painel do blogger, vá para Modelo > Editar HTML

3. Clique em qualquer lugar da janela de código e aperte Control+F ou Command+F e procure </head>

4. Acima de </head>, cole o seguinte código

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

5. Salve o modelo.

6. Vá para Layout > Adicionar Gadget. E Adicione HTML/JavaScript e cole o código abaixo

<style>.mbw-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer; } </style><img class="mbw-back-to-top" src="SUA IMAGEM" /><script type="text/javascript">/*****mybloggersworld.com***/ jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.mbw-back-to-top').fadeIn(duration); } else { //www.mybloggersworld.com jQuery('.mbw-back-to-top').fadeOut(duration); } }); jQuery('.mbw-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

7. Substitua SUA IMAGEM por qualquer imagem que queira.

8. Salve e pronto

Eu coloquei um aqui no blog e está com esse desenho aqui embaixo, clique para ver o que acontece!