Botão Voltar ao topo com efeito deslizante

em 11 de março de 2014


Eu já mostrei aqui no blog como inserir um botão Voltar ao topo deslizante.
Recorde aqui:
Botão voltar ao tpo com efeito scroll (igual do Pinterest)

O botão funciona que é uma beleza, mas sua instalação requer seguir 3 passos.
Neste que vou mostrar agora a instalação é muito mais simples e fácil.


Para ter em seu blog faça assim:
Acesse o painel administrativo do seu blog e clique na aba Layout.
Clique então em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na caixa que expandir cole este código:

Copiar o código

Onde marquei em vermelho (AQUI VOCÊ COLA O ENDEREÇO DE SUA IMAGEM ) é onde você coloca o endereço de seu ícone ou botão Voltar ao topo.

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

Abaixo fiz alguns botões de presente para você usar.
Salve em seu pc, hospede como ensinei acima e use à vontade em seu blog.
Não copie este post e nem repasse as imagens em seu blog. Se acredita que o tutorial será útil aos seus leitores indique através de um link como chegar aqui. 














Ajude o blog a crescer, compartilhe esse tutorial, curta, recomende...
Eu fico muito agradecida...


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

45 comentários , comente também!

  1. Adorei! Já adicionei no meu blog, este site é excelente, o melhor que encontrei até o momento!

    ResponderExcluir
  2. Oi Elaine, tudo bem? Posso às vezes ou sempre, não comentar, mas compartilho tudo, nunca se sabe quem está precisando, não é?
    Estou feliz com você aí "firmona", te amo e agradeço por compartilhar dicas muito especiais.
    Abraços carinhosos
    Maria Teresa

    ResponderExcluir
  3. Gostei imenso. Nem acredito que consegui fazer, eu que sou um calhau com olhos. Muitíssimo obrigada.
    Um abraço

    ResponderExcluir
  4. Oi Elaine
    Sou tão Sá Burrinha que não consegui, fui bem até o ponto- "aqui você cola o endereço de sua imagem"., que imagem é esta?
    Se puder me esclarecer vou adorar.
    Um beijo.

    ResponderExcluir
    Respostas
    1. Maria Célia, é o endereço da imagem que você escolher para ser seu botão.
      Veja onde explico sobre como hospedar imagens e você entenderá.
      beijossss

      Excluir
  5. Eliane, amei suas dicas. obrigada.
    bjs cristalinos

    ResponderExcluir
  6. Elaine, parabéns pelo blog!
    Está crédito no meu!

    http://mdesarrumado.blogspot.com.br/

    ResponderExcluir
  7. Olá Elaine,

    Em primeiro lugar quero dar-te os parabéns pelo excelente blog que tens e pela excelentes dicas que dás :).
    Graças ás tuas dica consegui colocar finalmente o meu blog como queria. OBRIGADA!! :)

    Beijinhos
    http://www.1fashionblog.co.uk/
    http://www.youtube.com/user/myfashion1blog

    ResponderExcluir
  8. Olá Elaine,

    Que maravilha!! Tanto que procurei essa ferramenta e não encontrava. Os leitores e seguidores do BLOG DO PARCEIRO sofriam demais quando chegam lá no blog pra lerem as postagens.
    A partir de hoje, 18/03/14, eles não irão mais ter esse problema, graças a essa postagem.
    PARABÉNS!!
    Aguardo a sua visita: http://josenidelima.blogspot.com.br/

    ResponderExcluir
  9. Oi Elaine, acabei de iniciar meu blog sem muita pretensão,porém quero que seja bonito e organizado e você está me proporcionando isso com suas dicas.
    A primeira tentativa já deu certo e com isso fiquei muito mais animada para deixar o meu cantinho com a minha personalidade estampada.
    Obrigada mesmo.
    Copiei a url do site lá , espero que eu tenha feito certo. Vou melhorar com o tempo e dedicação.
    Forte abraço e que Deus proteja sempre.
    Meu bebê está nascendo ainda mas se quiser ver a evolução com as suas dicas vou amar a visita.
    http://blogsemprekisdaluanda.blogspot.com.br/

    ResponderExcluir
  10. Oii Elaine usei um de seus modelinhos, obrigada pela ajuda

    http://defataprincesinha.blogspot.com.br/

    ResponderExcluir
  11. Oii Elaine usei um de seus modelinhos, obrigada pela ajuda

    http://defataprincesinha.blogspot.com.br/

    ResponderExcluir
  12. Oiiii Elaine comecei hoje meu blog e já aprendi muito com vc , obrigada por compartilhar o que sabe, usei uma imagem sua de Subir ao topo ficou um charme .. bjaum
    http://defataprincesinha.blogspot.com.br/

    ResponderExcluir
  13. OOi
    Gosto muito do seu Blog.
    Estou com u Blog em construção, então sempre to dando uma olhadinha aqui, pois gosto muito das dicas.
    Gostaria de saber se poderia me ajudar em uma questão que estou quebrando a cabeça, se tiver em seu blog desculpe perguntar mais não encontrei.
    Gostaria de saber como eu redireciono para outra pagina dentro do blog mesmo. mais clicando em um ícone. Por exemplo; faço um resumo de tudo sobre o blog so que não termino e no final coloco LEIA MAIS, ai se a pessoa quiser saber mais sobre o blog ela clica e é direcionada a pagina ''Sobre'' e assim lendo o final do post.
    Muito Obrigada gostaria de fazer isso com Gadget, para icar no lado da tela.
    agradeço des. de já
    beijos

    ResponderExcluir
  14. Sempre dando as melhores dicas, obrigada!

    eueminhacultura.blogspot.com.br

    ResponderExcluir
  15. Não consegui colocar nem este botão e nem o botão da fanpage em forma de pop-up, e simplesmente copiar o código para um layout HTML ou tem de mexer no HTML do blog ?

    ResponderExcluir
  16. Oiii...estou amando as dicas no seu blog...haaa eu peguei para por no meu o desenho numero 5.
    Agora irei tentar colocar a barra de menu =D
    Beijos
    Gurias Gata

    ResponderExcluir
  17. Muito obrigada. Amei seu blog.. nossa, é muito útil pra gente rs bjs

    ResponderExcluir
  18. Boa noite Elaine, eu adoro seus posts, estou sempre aqui dando uma olhadinha e vendo o que eu posso melhorar no meu "bebê blog".(já que tenho ele a menos de um mês) Você com seus posts mim ajudou bastante. Obrigada pela ajuda. E Parabéns pelo seu trabalho.

    ResponderExcluir
  19. Oi Elaine, parabéns pelo seu blog e por disponibilizar esses materiais pra gente. Eu achei um mais fofo que o outro. Beijos e muito sucesso

    www.blogdaandrezza.com.br

    ResponderExcluir
  20. Obrigada,levei o vasinho de flores.Parabéns pelo trabalho.
    Tenha uma semana abençoada.

    ResponderExcluir
  21. Ótimo tutorial, me ajudou muito, parabéns!! <3

    ResponderExcluir
  22. Muito obrigada mesmo! Ajudou muito no meu blog! Obrigada mesmo , estou muito grata! :)

    ResponderExcluir
  23. Muito bom! Bastante simples! www.penseicerto.blogspot.com

    ResponderExcluir
  24. Oi Elaine, vc poderia ensinar como colocar esses botões que fica no fim de cada postagem, como curtir compartilhar e tal? Obrigada, beijos.

    ResponderExcluir
  25. no meu blog não aparece a imagem desejada, mais aparece um icone que se clicar nele sobe ao topo (normal), mais a imagem que deveria aparecer nao aparece.

    ResponderExcluir
  26. Oi Elaine ! Você é incrível no que faz ! Obrigada por disponibilizar esses botões , eu usei dois desses nos meus blogs . Eu estou aprendendo com você, como deixá-los com um visual legal . Algumas dicas já coloquei em prática , mas não deu certo :( ,. mas depois vou tentar novamente .

    ResponderExcluir
  27. Adorei o tutorial. Deu super certo!!! amei
    estantevip.blogspot.com.br

    ResponderExcluir
  28. Adorei Elaine, escolhi para o meu blog o beijinho vermelho, mas já adianto que amei todos.
    Beijo e obrigado pelas ajudas, sempre que preciso te encontro pelo google.
    Beijo, Vivi

    http://coisasdavv.blogspot.com.br/

    ResponderExcluir
  29. Ficou perfeito, você é fera obrigado.
    beijinhos

    http://eueminhasplantinhas.blogspot.com.br/

    ResponderExcluir
  30. Adorei!!! Já peguei um! Bjo e dá uma passadinha no meu blog!
    http://vemveramiga.blogspot.com.br

    ResponderExcluir
  31. Amei essa dica, deixou o blog muito fofo

    ResponderExcluir
  32. Oi Elaine, tudo bem?
    Eu usei o código que você disponibilizou e deu certo, a imagem aparece e tudo.
    O problema é que só tem a imagem, ela não leva novamente para o topo... O que pode ser?
    Beijos

    ResponderExcluir
  33. Adorei essa dica e já estou utilizando no meu blog. bjs

    http://costureirainiciante.blogspot.com.br/

    ResponderExcluir
  34. Amei, estou usando no meu blog :) ficaria muito feliz se vocês dessem uma olhadinha no meu <3

    http://blogpequenocorvo.blogspot.com.br/

    ResponderExcluir
  35. Ei Elaine,mais um tutorial top!
    Já adicionei ao meu blog.
    Muito obrigada.
    Bjs

    www.vireimoda.com

    ResponderExcluir
  36. Show de Bola Elaine excelente !
    http://www.dicadeblog.com.br/2016/03/os-melhores-programas-de-afiliados-para.html

    ResponderExcluir
  37. Fiz com suas dicas e deu certinho =) tambem peguei sua imagem das flores na cestinha tá, espero que não se importe. Seus tutoriais me salvam sempre.
    Obrigada, beijosSs..

    http://receitascasosehistorias.blogspot.com.br

    ResponderExcluir
  38. O meu não aparece... Fica só com um quadradinho com um X no meio, mas a imagem não quer aparecer :´(

    ResponderExcluir
  39. Perfeito, muito obrigado!!!

    https://golbolinhaecia.blogspot.com.br

    ResponderExcluir
  40. Gentiiii, amo esse blog... Ajuda muito qualquer blogueira, seja iniciante ou aqueles que estão ao um bom tempo na rede.
    Obrigadaaaa pela ajudaaa

    aqueles que quiserem conhecer meu cantinho acessem

    mulhercristaeseular.blogspot.com.br

    Bjinhus

    ResponderExcluir
  41. Adorei!!
    Estava precisando de um mesmo,porque eu exclui o meu blog e fiz outro.kkk
    Os seus tutoriais estão me salvando aqui :)

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…