segunda-feira, 16 de maio de 2016

Back to top effect blogger keren

back-to-top-keren-button-blogger


Hoje vamos mostrar como instalar o botão back to top como visualizado na foto acima isso é algo muito importante uma vez que isso se torna muito útil para ajudar o usuário na navegação, esse widget tem um auto hide só aparece ao rolar a pagina para o fim o que atrai interação do usuário 


Primeiro vamos adicionar a fonte se você já tem uma bela fonte no seu Blogger ignore isso caso contrario copie e cole o seguinte código acima de </head>  Para isso faça login no blogger então no painel do blogger clique em modelo então editar >>  HTML/JavaScript com as teclas combinadas CTRL+F busque por </head> acima disso copie e cole o código




<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>


Em seguida vamos adicionar o CSS code.
para isso procure por ]]></b:skin> e acima disso copie e cole o seguinte código.



.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;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;}


Depois disso vamos para a ultima etapa procure por e acima disso copie e cole o seguinte código.

<div class='smoothscroll-top'>
    <span class='scroll-top-inner'>
        <i class='fa fa-2x fa-chevron-up'/>
    </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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Não esqueça antes de sair salvar. Pronto agora só ver o resultado.

Créditos: Terunik404
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner