22 julho 2019

Botão de subir e descer ao topo com efeito deslizante para Blogger

Botão de subir e descer ao topo para Blog

Gostou do novo template do blog Quero Dicas?

Pois é. Criando este novo tema para o blog, acabei me deparando com inúmeros tutoriais de customização e claro, não pude deixar de pensar em compartilhar com vocês.

Vou começar pelo blog Namina. Neste blog, além de disponibilizar alguns modelos de templates gratuitos para download, existem diferentes tutoriais, incluindo o botão de subir e descer ao topo com efeito deslizante para blogger. Infelizmente, este modelo eu tive que acrescentar um script para que funcionasse mais perfeitamente em nosso tema.


Botão de subir e descer ao topo para o Blogger?

Sim. A função do botão de subir e descer é para facilitar a interação dos nossos visitantes ao topo ou à base da página sem precisar rolar manualmente, o que ajuda e muito os visitantes quando há artigos com conteúdos longos a retornar para o topo ou para baixo instantaneamente.

Como Instalar o botão de subir e descer ao topo no Blogger

Antes de começarmos, eu sempre recomendo, fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro,
dê preferências ao blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

1. Agora, acesse a página para pegar os códigos que iremos utilizar.

2. Vá no painel do seu blog e acesse: Tema e Editar HTML



3. Procure </head> . Logo acima dele cole o 1º código

Para ser mais rápido a procura, 1º clique dentro do HTML depois use CTRL + F e na caixa de pesquisa cole o código que procura.

4. Agora procure por </body>. Logo acima dele cole o 2º código.

5. Salve e pronto. Botão instalado.

Para trocar as cores, basta alterar onde eu destaquei em vermelho.
Tabela de cores: Aqui

-------- Atenção ----------
  1. Font Awesome : Verifique se você já instalou o Font Awesome em seu blog. Caso já tenha instalo, retire o script do 1º código. (destaque em azul)
  2. Jquery : Verifique se você já instalou libs jquery 1.7.2 ou superior. Caso já tenha instalo, retire o script do 2º código. (destaque em verde)

Gostou? Fácil não é?
Como informei acima, este código pertence ao blog Namina, você pode acessá-lo aqui

E obrigada por sua visita, ela é muito bem vinda.
Se puder nos siga, compartilhe e faça parte!

Beijinhos

Nenhum comentário:

Postar um comentário

Amigos do Blog



Agregadores