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.

4 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

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…