Botão up and down para blog com efeito deslizante

em 1 de agosto de 2016

botão up and down para blog

Tempos atrás eu mostrei aqui como colocar os botões Subir/Descer no blog.
Os botões que vou mostrar hoje realizam a mesma função, mas sua implementação é bem mais simples.
O resultado você confere no meu Blog de Códigos.
Vamos aprender?
São apenas 2 passos bem simples.
Ao final do tutorial eu dou algumas dicas de personalização.
Leia tudo até o final e se certifique de haver entendido, tá?


Instalar os botões Subir e Descer no blog


Antes de tudo abra a página com os códigos que serão usados neste tutorial:


Copiar os códigos


A seguir vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de códigos tecle Ctrl+F.
Na barra de busca que aparecer digite  ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o Código CSS.

Agora digite </body> na barra de busca e tecle Enter para localizar.
Acima disso cole o Código HTML.
Salve, e tá feito.
Mais simples? Impossível.



Dicas extras de personalização do botão


Você pode alterar a cor de fundo, a cor das setas e o posicionamento dos botões.
Explicando:

Para alterar a cor de fundo troque o código hexadecimal precedido de # em background.
No código eu deixei o fundo branco, background: #ffffff;
Para alterar troque, portanto, o código #ffffff pelo código da cor desejada.

Para alterar a cor das setinhas troque border-color:transparent transparent #ca1700; pelo código da cor desejada. No caso eu deixei a seta em vermelho (#ca1700); altere esse código e a cor mudará.

O posicionamento do botão Down (que desce a página) você altera em
#GoToDown  no trecho que mostra top:45px;
Valores menores sobem, e valores maiores fazem a seta ser mostrada mais abaixo.
Eu deixei na altura exata para ser usada em blogs que tenham o menu fixo no topo.
Altere se desejar ou se quiser aproximar ambas as setas.

Para alterar o posicionamento da seta Up (que sobe a página) altere em #BounceToTop no trecho que mostra bottom:10px;
Valores maiores sobem, e valores menores mostram a seta mais abaixo.
Eu não mexeria aí, já está no rodapé da página.

Viu que simples que é?
Aproveite, divirta-se e instale em seu blog.
Facilita muito a vida do leitor...





Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

6 comentários , comente também!

  1. Elaine, sempre com dicas úteis ajudando todo mundo!

    Beijosss

    www.acheierabisquei.com.br

    ResponderExcluir
  2. Saudações tenho um problema em meu blog,que customizei com um de seus templates gratuitos o modelo culinária e infelizmente percebi um conflito entre o gadget do LinkWithin e o menu do template já que o mesmo só funciona se retiro o menu com o menu instalado ele não mais aparece é possível resolver???desde já agradeço sua resposta..Obrigado

    ResponderExcluir
    Respostas
    1. Antônio, eu não notei conflito porque não uso Linkwithin há anos.
      E no template já tem as postagens relacionadas instaladas.
      Precisa que o blog tenha os feeds ativo e com distribuição completa.
      De todo modo não creio que o menu cause conflito, ele é feito em CSS e não tem script...

      Excluir
  3. Elaine, um grande abraço.
    Segui suas dicas porém as setas não estão funcionando, será se e porque meu blog está em https?

    ResponderExcluir
    Respostas
    1. Edson, não sei dizer.
      Como você viu, no blog de testes, está funcionando sem problemas...
      Talvez haja algo em seu template que esteja causando algum conflito...

      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…