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

Botão Voltar ao topo moderno e com efeito deslizante

em 30/11/2017


Há, aqui no blog, alguns tutoriais que ensinam como ter no blog um botão Voltar ao topo.
Recorde:


Todos funcionam mas usam imagens para isso, e hoje eu quero te dar uma outra opção, que é bem lindinha, moderna e mais leve.
E pode ser personalizada de diversas formas em relação as cores, formato, etc...
Depois de pronto, seguindo exatamente  a personalização que eu fiz, ficará assim:


Demonstração do tutorial


Para ter em seu blog faça assim: vá até o painel administrativo de seu blog e clique em Tema.
A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de pesquisa digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.
Digite </head> na barra de busca e localize.
Acima de </head> cole o script da biblioteca JQuery e salve.
Agora, abaixo de </head> cole o CÓDIGO JAVASCRIPT.
Salve.
Localize </body> e acima dele cole o CÓDIGO HTML.
Salve.
E está pronto!
Ah, claro, os códigos:


Copiar os códigos


Dicas extras importantes:


1- Caso seu template já possua a biblioteca JQuery instalada pode pular essa parte.
2- Cores, formato e fontes são alteradas no CÓDIGO CSS.
3- A palavra TOPO é alterada no CÓDIGO HTML.
4- O ícone da setinha é definido pela fonte especial e pode ser alterado trocando a expressão <i class='fa fa-chevron-up'/> (do CÓDIGO HTML) por outra fonte que desejar. Basta trocar chevron-up pelo nome do ícone que preferir.
Este site tem as opções que são geradas pela fonte Awesome.

E terminamos!
Gostou, meu bem?


8 comentários via Blogger
comentários via Facebook

8 comentários:

  1. Oii Elaine seu blog é um sonho, poderia viar mais um pouquinho haha! Adorei a dica, só que o problema é que me bananei toda :( vc poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Millena, qual dificuldade você encontrou?

      Excluir
    2. Fiz tudo certo mas não fuciona nada :(

      Excluir
    3. Millena, adicionei uma linha com a biblioteca JQuery, seu blog talvez não a possua e por isso não funciona.
      Experimente de novo e me diz.

      Excluir
  2. Elaine, tudo bem? Logo no início pede para colar o CÓDIGO CSS (onde está escrito: na barra de pesquisa digite (?) e tecle enter para localizar. O que é para digitar nesta primeira etapa?

    Bj

    ResponderExcluir
    Respostas
    1. Regina, já corrigi, mas todo código css sempre é na folha de estios do blog :)

      Excluir
  3. To adorando aprender essas coisas. Meu botão de subir tá funcionando bem por enquanto, mas vou salvar o link pra futuras alterações.

    Vidas em Preto e Branco

    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…



No Instagram