Todas as Sagas e Arcos
de One Piece!

Guia Completo


sample18
  Inspirações: Tatuagens de Mascaras Hannya (Leia +)
profile-sample1
sample10
 25 animes com personagem Gyaru!  (Leia +)
profile-sample5

Fique mais um pouco! Confira as principais categorias do blog aqui:


ANIMES COSPLAY WALLPAPERS DESIGN DICAS PARA BLOGS DOWNLOADS RESENHAS


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

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 

31 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
  5. Olá, 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?

    ResponderExcluir
    Respostas
    1. Você 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á!

      Excluir
  6. Ameiii, já estou usando, muito obrigada.

    ResponderExcluir
    Respostas
    1. AA que bom!! Fico contente em ver que funcionou certo aí também!

      Excluir
  7. MUUUUITO obrigada! Eu estava catando um botão pra colocar no meu blog, e os seus são maravilhosos!

    ResponderExcluir
    Respostas
    1. Obrigadaa por comentar! Fico feliz em saber que gostou! Tentei fazer algo mais limpo e simples pra combinar com qualquer layout!

      Excluir
  8. Simplesmente obrigado, adorei o botão!

    ResponderExcluir
  9. Oi, como eu faço para colocar esse botão do lado esquerdo no meu site?

    ResponderExcluir
    Respostas
    1. Oii, onde tá escrito right: 0px; , é só apagar e trocar para left, assim left: 0px;

      Excluir
  10. Muito obrigada por disponibilizar esse tutorial! <3

    ResponderExcluir

Tecnologia do Blogger.