Como instalar botão Voltar ao topo com SVG

Faz muito tempo desde que atualizei a postagem aqui, talvez por causa de atividades offline e, quando estava online, verifiquei apenas o modelo do Blogger . 


Nestas dicas do Blogger, a Arlina Design compartilhará dicas sobre como instalar o botão Voltar ao topo com o SVG

Talvez você já conheça a função principal do botão Voltar ao topo, que facilita aos visitantes do blog retornar instantaneamente ao topo sem precisar rolar as páginas manualmente; certamente isso ajudará bastante os visitantes ao abrir uma página com conteúdo longo do artigo para retornar instantaneamente ao menu principal.

Para aqueles que estão curiosos sobre como instalá-lo em um blog, siga as etapas abaixo.

Como instalar o botão Voltar ao topo com SVG



Primeiro, abra o Blogger  > Clique no menu Temas  e no botão Editar HTML  > Adicione este código antes </head>

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Em seguida, adicione o código abaixo antes

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Em seguida, clique no botão Salvar tema  e veja os resultados em seu blog.

Isso é tudo !Como instalar o botão Voltar ao topo com SVG da Mais Templates  ,espero que seja útil para o meu amigo.



  • [👑 Desbloqueie postagens e links premium sem Anúncio ]
    Para conseguir pegar o link no protetor basta aguardar 15 segundos.. ou Ativar acesso Premium.   Ativar acesso Premium CLIQUE AQUI!

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *