Adicionar botão "Voltar ao Topo" com JQuery no blog
Os 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>.
Agora, antes de ]]></b:skin> adicione o código abaixo:
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!
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: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</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!
O botão ficou no blogger, kkk, só que quando clicko nele, ele não faz nada, como posso arrumar isto?
ResponderExcluirO código foi alterado! Agora está funcionando perfeitamente!
ExcluirObrigado.
Abraços!
Excelente dica. Já uso no meu blog.
ResponderExcluirVlw, Wilamis!
Grande abraço : )
Faz Um Tuto Ensinando a colocar um Igual Ao Seu Com Aquela Imagem Igual Pow. !!
ResponderExcluirÓtima dica funcionou direitinho!!
ResponderExcluirvlw mano site lagal
ResponderExcluirMuito bom mesmo. Veja como ficou legal: http://charlitoncarvalho.blogspot.com.br
ResponderExcluirvlw mano mais no meu blog kitroll.blogspot.oom ele ficou a esquerda queria que ficasse a direita e sempre visível
ResponderExcluirMuito Obrigado!!!!
ResponderExcluironde fica a ? desculpe sou meio novo aqui
ResponderExcluirOBRIGADO AMIGO,DEUS ABENÇOE,GOSTEI, CONHECIMENTO SE PASSA E NÃO SE GUARDA PARA SI MESMO ,HUMILDADE É TUDO,PARABÉNS!
ResponderExcluirOBRIGADO AMIGO,GOSTEI PARABÉNS POR SUA HUMILDADE DE PASSAR SEUS CONHECIMENTOS.
ResponderExcluirUM GRANDE ABRAÇO.
COLOQUEI EM MEU BLOG:
WWW.TAEKWONDOATLETA.BLOGSPOT.COM.BR
Perfeito o tutorial! Obrigado por partilhares conosco! ;)
ResponderExcluir