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:
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...
Dias online
Postagens
comentários
Elaine, sempre com dicas úteis ajudando todo mundo!
ResponderExcluirBeijosss
www.acheierabisquei.com.br
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
ResponderExcluirAntônio, eu não notei conflito porque não uso Linkwithin há anos.
ExcluirE 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...
Amo demais as suas dicas💗
ResponderExcluirElaine, um grande abraço.
ResponderExcluirSegui suas dicas porém as setas não estão funcionando, será se e porque meu blog está em https?
Edson, não sei dizer.
ExcluirComo você viu, no blog de testes, está funcionando sem problemas...
Talvez haja algo em seu template que esteja causando algum conflito...
Oi no meu não funciona e eu fiz tudo direitinho, aparece a setinha mas não sobe nem desce :C
ResponderExcluirwww.raylinnerhanna.blogspot.com