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.png
Botã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

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

Todos os pngs foram feitos por mim, para ver mais clique na tag freebies do blog, ou segue minha pasta no Pinterest! É atualizada frequentemente!

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