Instalando botão voltar ao topo no Blogger - Talvez haja muitos tutoriais espalhados na internet sobre como instalar o botão voltar ao topo no blog e desta vez eu vou compartilhar dicas sobre o tutorial.




A função do botão voltar ao topo em si é importante o suficiente porque torna mais fácil para os visitantes que querem subir a página apenas com o scroll do mouse, com esse tutorial basta clicar em um botão que a página volta para o topo.




Observação: Se o modelo já tem botões de volta ao topo, por favor, retire-os primeiro.


1. Faça login em seu blog> Modelo> Editar HTML


2. Em seguida, copie e cole o código abaixo após <head> ou antes de </head><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>





Se seu modelo já tiver a Fontawesome acima, favor ignorar a etapa e seguir até o próximo passo.


3. Copie e cole o código abaixo antes de ]]></b:skin> ou </style> .smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s; } .smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s; } .smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px; } .smoothscroll-top i.fa { line-height:inherit; }








4. Copie e cole o código abaixo antes de </body><div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type='text/javascript'> //<![CDATA[ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear'); } //]]> </script>



5. Clique em Salvar Modelo e veja os resultados