Criar botão Voltar ao Topo com efeito deslizante

Unknown 03:56 , , , , 17 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!
  • Blogger Comments
  • Facebook Comments

17 comentários :

  1. Unknown23/05/2013, 11:31

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

    ResponderExcluir
  2. Unknown24/05/2013, 07:34

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

    ResponderExcluir
  3. Leo Carvalho02/09/2013, 14:52

    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
  4. Unknown02/09/2013, 15:58

    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
  5. Leny Wata21/09/2013, 00:38

    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. Unknown21/09/2013, 08:26

      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. Unknown21/09/2013, 10:11

      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
  6. Unknown21/09/2013, 08:28

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

    ResponderExcluir
  7. Unknown29/12/2013, 23:03

    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. Unknown26/09/2014, 15:49

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

      Excluir
  8. Ellen Maria30/12/2013, 12:11

    Qual a tag da segunda ? Não entendi.

    ResponderExcluir
  9. Wanessa16/09/2014, 12:52

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

    ResponderExcluir
  10. Unknown16/01/2015, 03:58

    Postagem atualizada.

    ResponderExcluir
  11. Formigas Brasil08/10/2015, 04:55

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

    ResponderExcluir
  12. Formigas Brasil08/10/2015, 04:56

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

    ResponderExcluir
  13. Mi ミ12/11/2015, 23:26

    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.

Assinar: Postar comentários ( Atom )