Como colocar botão de Voltar ao Topo no Blogger!
Konnichiwaa fadinhas e elfos! Como estão? Aqui vou ensinar como adicionar o botão de voltar ao topo, no blog! Essa é a versão mais moderna e profissional para combinar com qualquer tipo de layout. Espero que esse post te ajude, eu fiz alguns modelos em png com seus respectivos links diretos! Aprenda aqui a adicionar o botão da forma mais prática e bonita! Enfim, vamos lá?
Como colocar botão de voltar ao topo no Blogger: Com efeito deslizante!
Primeiramente você vai precisar ir até Layout, e adicionar um Gadget de HTML/Javacript, vai abrir uma aba vazia, nela cole o código abaixo:<style> .backtotop { position: fixed; bottom: 10px; /* increase value to move position up */ right: 0px; /* increase value to move position left */ color: #000000; /* color of text */ font-size: 12px; /* changes size of text */ padding: 10px; /* add space around the text */ text-transform: uppercase; /* change text to all caps */ letter-spacing: 1.0px; /* space between letters */ } .backtotop:hover { color: #ffffff; /* color of text on hover over */ text-decoration: none; /* no underline */ bottom: 10px; /* increase value to move position up */ right: 0px; /* increase value to move position left */ padding: 10px; /* add space around the text */ } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 300; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.backtotop').fadeIn(duration); } else { jQuery('.backtotop').fadeOut(duration); } }); jQuery('.backtotop').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <a href="#" class="backtotop"><img src="https://imgur.com/MCKRFI1.png" width="50px" height="50px" alt="back to top" /></a>
Na última linha tem o png da imagem de voltar ao topo. <img src="https://imgur.com/MCKRFI1.png" [...] Para mudar é só substituir pelo link de outra imagem! Abaixo to deixando alguns modelos para usarem!
15 Botões de subir ao topo em PNG: Links
Seta simples preto: https://imgur.com/QkTXZC4.pngBotão quadrado preto: https://imgur.com/ZyVhXcv.png
Botão redondo cinza: https://imgur.com/xyD3Y9r.png
Seta simples salmão: https://imgur.com/6r3c1yi.png
Botão quadrado salmão: https://imgur.com/sD3S1iW.png
Botão redondo salmão: https://imgur.com/Ei9ge6G.png
Todos os pngs foram feitos por mim, para ver mais clique na tag freebies do blog, ou segue minha pasta no Pinterest! É atualizada frequentemente!
Seta simples azul: https://imgur.com/zuTLdei.png
Botão quadrado azul: https://imgur.com/BrVeOuQ.png
Botão redondo azul: https://imgur.com/NTvB8R9.png
Seta simples rosa: https://imgur.com/VHJFB74.png
Botão quadrado rosa: https://imgur.com/bt6ZsJj.png
Botão redondo rosa: https://imgur.com/kwZHnf6.png
Seta simples roxo: https://imgur.com/MCKRFI1.png
Botão quadrado roxo: https://imgur.com/oGDVsAw.png
Botão redondo roxo: https://imgur.com/VGzhlq4.png
Por hoje é só! Obrigada por acompanhar o blog! Vou responder todos assim que der! Espero que tenham gostado do post! Acompanhe as Redes Sociais do Sweet Magic também: Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus 
Oiee June!
ResponderExcluirMulher do céu tu salvou minha vida, eu tava querendo por isso faz tempo no meu blog e não conseguia de jeito nenhum. Obrigadaaa ♥
Oii! Que legal que conseguiu com o tutorial aqui!
ExcluirFico feliz mesmo que te ajudou, obrigadaa, kissus!
Oie <3 que trabalho incrível, obrigada por compartilhar o tutorial <3
ResponderExcluirOii, muito obrigadaa <3
ExcluirShow sua dica ;)
ResponderExcluirQue bom que ajudou! Obrigada pela visita!
Excluirmuito boa sua postagem. Parabens
ResponderExcluirObrigadaa, fico feliz por ter sido útil!
Excluirvaleu obrigado
ResponderExcluirNadaa!! Obrigada pela visita!
ExcluirConsegui, muito obrigada! ^-^
ResponderExcluirNada, legal que conseguiu! Obrigada pela visita!
Excluirótimo exemplo. Obrigado!
ResponderExcluirMas gostaria de Saber sobre a possibilidade de inverter a posição (já que ele vem na direita)!
Nadaa, fico feliz em saber que ajudou!
ExcluirMude as palavras ''right'', para ''left'' que vai inverter!
Kissus!
Me ajudou muito!! Obrigada
ResponderExcluirAaaah que bom!
ExcluirObrigada por comentar!
Muitíssimo obrigado! Colocado no site que administro e funcionando… www.astemar.com.br
ResponderExcluirAaaah fico super feliz! Obrigadaa
ExcluirOlá, June, adorei suas dicas e os modelos das setinhas são muito fofos.Mas eu estou precisando de uma dica. não sei se você pode me ajudar. Estou precisando colocar as setas ou botões de Anterior e Próximo para por no final do blog. Alguma ideia?
ResponderExcluirVocê precisa achar o elemento no html, e depois ir na parte de css e adicionar a imagem. Eu não personalizei o meu, mas existe tutorial já!
ExcluirAmeiii, já estou usando, muito obrigada.
ResponderExcluirAA que bom!! Fico contente em ver que funcionou certo aí também!
ExcluirMUUUUITO obrigada! Eu estava catando um botão pra colocar no meu blog, e os seus são maravilhosos!
ResponderExcluirObrigadaa por comentar! Fico feliz em saber que gostou! Tentei fazer algo mais limpo e simples pra combinar com qualquer layout!
ExcluirSimplesmente obrigado, adorei o botão!
ResponderExcluirque bom!! obrigada por usar e comentar!
ExcluirMuito obrigado por compartilhar!!!
ResponderExcluirNadaa, obrigada por comentar!
ExcluirOi, como eu faço para colocar esse botão do lado esquerdo no meu site?
ResponderExcluirOii, onde tá escrito right: 0px; , é só apagar e trocar para left, assim left: 0px;
ExcluirMuito obrigada por disponibilizar esse tutorial! <3
ResponderExcluir