Botão Voltar ao topo com efeito deslizante - * Blog Elaine Gaspareto *

Botão Voltar ao topo com efeito deslizante

Publicado em 11/03/2014 by

Tempo de leitura:


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






Compartilhe
Compartilhe
Linkedin
Salvar

Este post está arquivado em , ,
49 comentários via Blogger
comentários via Facebook

49 comentários:

  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

  24. Muito bom! Bastante simples! www.penseicerto.blogspot.com

    ResponderExcluir

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

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

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

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

    ResponderExcluir

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

  30. Ficou perfeito, você é fera obrigado.
    beijinhos

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

    ResponderExcluir

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

    ResponderExcluir

  32. Amei essa dica, deixou o blog muito fofo

    ResponderExcluir

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

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

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

    ResponderExcluir

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

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

    ResponderExcluir

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

    www.vireimoda.com

    ResponderExcluir

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

    ResponderExcluir

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

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

    ResponderExcluir

  40. Perfeito, muito obrigado!!!

    https://golbolinhaecia.blogspot.com.br

    ResponderExcluir

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

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

  43. No meu não deu certo por causa do selo de segurança, ele não permite esse codígo, alguém puderia me indicar um compativel, desde já fico grato http://vai.la/oytf

    ResponderExcluir

  44. Meu Slider para de funcionar por causa deste código '- e o mais simples não funfa!

    ResponderExcluir

  45. Oi!
    Fiz conforme a explicação, mas a imagem que está no botão não aparece. Pode me ajudar?
    Beijos

    http://tudoqueeuli.blogspot.com

    ResponderExcluir
    Respostas

    1. Erica, a imagem não aparece porque você apagou as aspas do endereço dela. Confira seu código e faça a correção...

      Excluir

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…

Assinar: Postar comentários (Atom)