template

Adicionando botão Voltar ao topo em blogs do Blogger

quarta-feira, 13 de fevereiro de 2013

Hoje, temos um tutorial onde iremos aprender a adicionar um botão que volta ao topo do blog. Este gadget foi retirado de um gadget do Tumblr, onde fiz um teste e deu certo aqui no Blogger e estou utilizam ele aqui no CB. Ele é muito elegante e você pode personalizar do modo que desejar. Vamos lá?

1. Acessando a guia Modelo do seu blog, pressione Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.

</body>

2. Imediatamente, abaixo do código acima cole este outro código. Lembre-se de modificar o que desejar.

solid #C9C9C9;}
</style>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script

type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Voltar ao 
topo</a>

Na parte destacada de vermelho, você deverá alterar o arredondamento das bordas (cantos); Nas partes destacadas de azul, altere a cor de fundo do botão; Em laranja, aletre pela cor do texto do botão e, em verde, altere a cor, estilo e largura da borda. Voicê também pode alterar o texto do botão que está em Água.