Adicionando botão Voltar ao topo em blogs do Blogger

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.

<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px 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.Dica importante: Você poderá adicionar mais elementos para a personalização do botão o quanto quiser e deixá-lo a cara do seu blog, mas lembre-se que você deverá colocar antes da tag de fechamento .

3. Depois que clique em Visualizar e role um pouco a página para ver se o mesmo aparece, depois clique em Salvar modelo.Dica: Para ver ele em funcionamento ainda na Visualização, basta clicar em qualquer área do blog na visualização e clicar em Inspecionar elemento, depois que carregar, pressione Delete do seu teclado e veja se está em funcionamento.

Pronto! Seu novo gadget estrá adicionado. Acho este gadget muito útil pois não precisa fazer o leitor rolar toda a página (se for muito grade). Vale lembrar que ele utiliza o AJAX e JavaScript, portanto, sugiro que leia a postagem antes de instalar ou logo após se ele não estiver funcionando:

• Por que alguns códigos e scripts não funcionam em meu blog? - Categoria Blogger

Até a próxima!