Como colocar botão de Voltar ao Topo no Blogger!

outubro 05, 2019

Botão de Subir ao Topo PNG!

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á?
Botão de Subir ao Topo PNG

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!


button-subir-ao-topo-png

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 

Leia também:

17 comentários

  1. Oiee June!
    Mulher 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 ♥

    ResponderExcluir
    Respostas
    1. Oii! Que legal que conseguiu com o tutorial aqui!
      Fico feliz mesmo que te ajudou, obrigadaa, kissus!

      Excluir
  2. Oie <3 que trabalho incrível, obrigada por compartilhar o tutorial <3

    ResponderExcluir
  3. ótimo exemplo. Obrigado!
    Mas gostaria de Saber sobre a possibilidade de inverter a posição (já que ele vem na direita)!

    ResponderExcluir
    Respostas
    1. Nadaa, fico feliz em saber que ajudou!
      Mude as palavras ''right'', para ''left'' que vai inverter!
      Kissus!

      Excluir
  4. Muitíssimo obrigado! Colocado no site que administro e funcionando… www.astemar.com.br

    ResponderExcluir