Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 7 de novembro de 2012

    Botão de ir ao topo com efeito deslizante

    Vou mostrar como colocar um botão de ir ao topo com efeitos deslizantes, há tempos que eu queria publicar este artigo, pode até parecer clichê mas a falta de tempo é o vilão dessa história, mas a pedido de um leitor que não quiz se identificar, vamos ensinar no artigo de hoje.



    Vamos ao Tutorial:


    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

    1º- Clique em Editar HTML e expandir modelos de widgets. 
    2º- procure por </head> e  antes cole o seguinte código.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    3º- Agora antes da tag  ]]></b:skin> cole o seguinte código.

    /* Botón Ir Arriba
    ----------------------------------------------- */
    #IrArriba {
    position: fixed;
    bottom: 30px; /* Distancia desde abajo */
    right: 30px; /* Distancia desde la derecha */
    }

    #IrArriba span {
    width: 60px; /* Ancho del botón */
    height: 60px; /* Alto del botón */
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYHYKKoa4N37C73FQEI22aHSn5vRf6Hyz5xua6Nzly9s4ckAEWtDAHeFeJsIoEx2Azf2AfyfwB7QmS9LykReRgLLUD7JHby3bcQ5lC4BvA1tUHeWg1Qkh-WtihYLoy0pa5O8VhUxGvN50/s60/flecha-arriba.png) no-repeat center center;
    }

    4º E por ultimo procure por </body> e cole antes o código antes.
    <div id='IrArriba'>
    <a href='#Arriba'><span/></a>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    // Botón para Ir Arriba
    jQuery.noConflict();
    jQuery(document).ready(function() {
    jQuery("#IrArriba").hide();
    jQuery(function () {
    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 200) {
    jQuery('#IrArriba').fadeIn();
    } else {
    jQuery('#IrArriba').fadeOut();
    }
    });
    jQuery('#IrArriba a').click(function () {
    jQuery('body,html').animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });

    });
    //]]>
    </script>
     Se deseja mudar a imagem basta substituir a URL da imagem destacado em azul no terceiro passo pela URL que deseja.

    Salve e pronto.

    1 comentários: