Adicionar botão "Voltar ao Topo" com JQuery no blog


botao voltar ao topoOs botões normais "back to top" fazem a página simplesmente voltar ao início, em um piscar de olhos, a página simplesmente volta com tudo. O botão que lhe mostraremos hoje, é mais suave. Ele leva o leitor ao topo da página deslizando gradualmente, começando da velocidade mais rápida até chegar ao início. Não é algo que se diga, nossa como mudará meu blog, mas, são complementos que fazem seu blog ficar mais bonito.

Para adicionar ao Blogger, é muito simples. Se o seu blog já tem o plugin JQuery, pule para o passo 2, se não, adicione o código abaixo antes de </head>.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

Agora, antes de ]]></b:skin> adicione o código abaixo:

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj5dCC-y1BcmCZB69DQDwpmyYwJ1WZQCwWPlTviE9JvS5yXE6XToa6GsJBaqu-ounHK6bPapNjCNRji6U9HrViQb0VjlA9BNDBZJVWbqrODMtn_WU53CFQimgYKpH1HZKfQYLgQxziH0/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj5dCC-y1BcmCZB69DQDwpmyYwJ1WZQCwWPlTviE9JvS5yXE6XToa6GsJBaqu-ounHK6bPapNjCNRji6U9HrViQb0VjlA9BNDBZJVWbqrODMtn_WU53CFQimgYKpH1HZKfQYLgQxziH0/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Salve e pronto! O botão fica no canto inferior direito do seu blog e aparecerá somente quando você movimentar a página!

Até a próxima!

13 comentários:

  1. O botão ficou no blogger, kkk, só que quando clicko nele, ele não faz nada, como posso arrumar isto?

    ResponderExcluir
    Respostas
    1. O código foi alterado! Agora está funcionando perfeitamente!

      Obrigado.

      Abraços!

      Excluir
  2. Excelente dica. Já uso no meu blog.

    Vlw, Wilamis!

    Grande abraço : )

    ResponderExcluir
  3. Faz Um Tuto Ensinando a colocar um Igual Ao Seu Com Aquela Imagem Igual Pow. !!

    ResponderExcluir
  4. Muito bom mesmo. Veja como ficou legal: http://charlitoncarvalho.blogspot.com.br

    ResponderExcluir
  5. vlw mano mais no meu blog kitroll.blogspot.oom ele ficou a esquerda queria que ficasse a direita e sempre visível

    ResponderExcluir
  6. onde fica a ? desculpe sou meio novo aqui

    ResponderExcluir
  7. OBRIGADO AMIGO,DEUS ABENÇOE,GOSTEI, CONHECIMENTO SE PASSA E NÃO SE GUARDA PARA SI MESMO ,HUMILDADE É TUDO,PARABÉNS!

    ResponderExcluir
  8. OBRIGADO AMIGO,GOSTEI PARABÉNS POR SUA HUMILDADE DE PASSAR SEUS CONHECIMENTOS.
    UM GRANDE ABRAÇO.
    COLOQUEI EM MEU BLOG:
    WWW.TAEKWONDOATLETA.BLOGSPOT.COM.BR

    ResponderExcluir
  9. Perfeito o tutorial! Obrigado por partilhares conosco! ;)

    ResponderExcluir

Visualizações dinâmicas

Arquivo do blog

Estamos aqui também

Copyright© 2010 - 2013 - Redes e Blogger - Todos os direitos reservados.

Redes e Blogger é orgulhosamente desenvolvido com Blogger


Termos de uso | Política de Privacidade | Mapa do blog

Template by Dicas Blogger | Modified by Wilamis Rogério