Botão Voltar ao topo com efeito scroll (igual ao do Pinterest)

Este é, talvez, um dos recursos que mais me perguntam comofazer. Existem alguns modos, vou ensinar o que eu uso há alguns anos e que nunca deu erro.


Importante:
Faça sempre backup antes de mexer no código-fonte de seu blog.

Para começar faça login no Blogger e clique no nome do blog onde deseja inserir o hack. (não sabe o que é hack? Leia aqui e descubra!)

Na página que abrir clique em Modelo, que aparece no lado esquerdo. Ao clicar vai expandir a página, selecione então Editar HTML.
Vai abrir o código-fonte de seu blog. Dentro do código-fonte tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.

 Acima dela cole o Código CSS:


Copiar os códigos

Agora vamos adicionar o script que faz o botão funcionar.
Localize esta tag de fechamento: </body>

Preste atenção, tem que ser exatamente esta, ok?
Acima dela cole o código Javascript.
Onde está escrito Topo altere para o texto que preferir.
Visualize e se tudo estiver ok salve as alterações.


Caso queira uma imagem ao invés do texto Topo (ou similar) faça assim:

1. Encontre a imagem que deseja usar;
2. Hospede-a em algum host de imagem (*eu hospedo no próprio Blogger);
3. Copie o endereço da imagem que deseja usar.

De posse do endereço da imagem que deseja usar  substitua a primeira linha do código acima, esta:

<a href='#' id='toTop'>Topo</a>

Por esta:

<a href='#' id='toTop'><img src='AQUI O ENDEREÇO DE SUA IMAGEM'> </img></a>

Também será preciso ajustar a largura no código CSS para que sua imagem fique bem posicionada. Caso sua imagem tenha, por exemplo, 80px de largura altere para esse valor o número que marquei em verde no código CSS.
Visualize e se tudo estiver ok, salve as alterações.

Mas...
Se você achou esse tipo de Voltar ao topo muito complicado tem outro, mais simples, sem scroll.
Faça assim:
Clique na aba Layout em seu painel e na página que expandir clique em Adicionar um gagdet. Escolha a opção HTML/JAVASCRIPT e na janelinha que abrir cole este código:

<div style="position:fixed; bottom:0px; right:0px;"> <a href="#"><img src="LINK DA IMAGEM" <br /> border="0" /></a></div>

Faça a alteração inserindo o endereço de sua imagem e salve.
Arraste para onde quiser e a seguir clique em Salvar alterações.

*Como hospedar uma imagem usando o próprio Blogger?

Faça assim:
Crie uma postagem 'falsa', que nunca será publicada, ficando sempre no rascunho.
Insira nela a imagem que deseja hospedar. Depois de concluir o upload da imagem clique sobre ela e com o botão direito do mouse copie o endereço, url ou link da imagem (o nome dependerá de qual navegador esteja usando); este é o endereço web de sua imagem.

Brindes para seu blog

Aproveitei e fiz algumas imagens de presente para você; salve-as em seu computador e utilize para personalizar seu Botão Voltar ao topo:

Todas estão com fundo transparente e medem entre 100px e 70px de largura. Caso usar me diga, eu gostaria de ver em seu blog!

Conheça a web-série Como personalizar o blog

1. Como criar um blog: criação da conta Google e criação do blog
2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas; 
3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
6. Inserir assinatura personalizada;
7. Colocar Voltar ao topo com efeito deslizante;
8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
9. Data dos posts em formato calendário
10. Número de comentários dentro de um balão  

Gostou?
Então clique no ícone do G+, ou se preferir curta a postagem!
Muito obrigada! Sua divulgação faz o blog crescer e melhorar!!!