Criar botão Voltar ao Topo com efeito deslizante

19 comentários
deslizante

Botão Voltar ao Topo

O que você acha de inserir um botão em seu blog para voltar ao topo com um efeito deslizante e moderno?

Para muitos blogs, é essencial ter um botão voltar ao topo, justamente por ser cansativo ter que rolar o scroll ou a barra lateral para cima.

É por esse desconforto que aumenta a taxa de rejeição dos blogs e, consequentemente, diminui o tempo das visitas. Pensando nisso, resolvemos criar esse post para quem se preocupa com esse item.

O código é simples e o processo pode ser feito de maneira rápida.

O botão ficará localizado no rodapé da página, ao subir a página, o botão some, e ao correr a página para baixo, o botão aparece de mameira discreta no canto inferior direito do seu blog.

Tutorial - Botão voltar ao topo deslizante

Vá até o painel do Blogger, selecione seu blog, e no menu lateral procure por layoutl. Em seguida, clique em adicionar gadget. Escolha a opção HTML/Javascript, e insira o código abaixo:


Após colocar o código acima no gadget, antes de salvar, insira a url da imagem no seguinte local:

<img src="AQUI O ENDEREÇO DE SUA IMAGEM"/>

Feito isso, salve e visualize.

Abaixo, você pode copiar a url de algumas imagens que inserimos para você modificar seu botão.


http://www.graficaeskenazi.com.br/imagens/acabamento/seta_cima.png

http://www.intelmib.com.br/ajuda/telas/62/15.png

http://www.syspel.com.br/manuais/seta.png

http://espelhodabia.com.br/images/setaup.png

http://cdn-img.easyicon.cn/png/5813/581382.png

http://www.mgoesrepres.com.br/images/up.png

Agora, salve e está pronto! Você tem um elegante botão de voltar ao topo, que dificilmente entrará em conflito com outros scripts em seu blog!

19 comentários :

  1. Olá, esse blog é ótimo. Parabéns!

    ResponderExcluir
  2. agradeço a visita e fico satisfeito em saber que o botão de voltar ao topo tenha sido útil para você

    ResponderExcluir
  3. A Equipe FrontierZ agradece sua ajuda. você ajudo muito agente com esse post.
    Ass:.Dono da FrontierZ

    ResponderExcluir
  4. O meu não ficou como o Demo, pode ver se eu fiz algo errado ? ficou lá embaixo sem efeito

    http://portalfisionutri.blogspot.com.br/

    ResponderExcluir
  5. dei uma olhada em seu blog e não vi o botão para voltar ao topo refaça os passos com calma que você vai conseguir, também andei dando uma olhada em seus Gadgets e reparei que você não tem muitos scripts para entrar em conflito com o botão de voltar ao topo pode ficar tranquilo que vai dar certo, abraço.

    ResponderExcluir
  6. Olá você disse tudo isso{Vá até o painel do Blogger, selecione seu blog, e no menu lateral procure por modelo Em seguida, clique em editar html. Na caixa de códigos, dê um Ctrl+F e procure pela tag ]]> Acima dela, cole o código abaixo: qual tag? emcima de onde? tem muitos não entendi onde colocar o código... porque tem em ]]>body, ]]>, ]]>header, vários basta por favor me dize onde colocar o código obrigada. tirar esse sou um robô por favor! isso também da um desanimo na hora de deixar comentário.

    ResponderExcluir
    Respostas
    1. estou sempre online essa mensagem do robô é o chat online que as vezes eu não estou on e neste caso basta deixa uma mensagem off que eu vejo e retorno se não for no post retorno por Email, agradeço a visita e a atenção pelo erro no post. seja sempre bem vinda ao blog gerenciado, abraço.

      Excluir
    2. a tag que você deve procurar é ]]> logo acima dela você deve colocar o código de estilo o css vou corrigir o post amigo obrigado.

      Excluir
  7. a tag que você deve colocar o código de estilo da primeira caixa de auto seleção é ]]> < / b:skin

    ResponderExcluir
  8. então amigo já andei por outros blogs e tutoriais para colocar esse botão e nd havia conseguido até agora, mt bom!! porém o me botão não ficou com imagem..q fazer??
    vlew!!

    ResponderExcluir
    Respostas
    1. preciso valiar seu caso especifique melhor seu problema, você inseriu a url da imagens no local determinado do tutorial acima .

      Excluir
  9. Qual a tag da segunda ? Não entendi.

    ResponderExcluir
  10. Qual é a tag do segundo código? também não intendi! Obrigada

    ResponderExcluir
  11. Não funcionou no meu blog www.formigasbrasil.com

    ResponderExcluir
  12. Não funcionou no meu blog www.formigasbrasil.com

    ResponderExcluir
  13. Salvou meu blog, hahah! ♥

    www.candyteatime.blogspot.com.br

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.