Adicionando botão Voltar ao topo em blogs do Blogger

Compartilhar:
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:
Até a próxima!
► Postagens Relacionadas:

8 Comentários

Herlan Santos disse...

Olá João.

Muito bom esse botão, muito elegante mesmo, gostei também do efeito deslizante dele.
Vou utilizar em meu blog :D

Abraços!

1 de junho de 2012 às 22:00
João Almeida disse...

Fico feliz que tenha gostado e realmente é muito elegante.

1 de junho de 2012 às 22:18
Izaque Liborio disse...

João.

Esse botão é muito legal, eu testei ele através do seu blog, e percebi que ele tem transparência, muito legal o efeito Jquey dele.

Abraços.

2 de junho de 2012 às 00:37
João Almeida disse...

Realmente ele é muito legal! Obrigado pelos elogios e abraços.

2 de junho de 2012 às 11:49
Josélia Moura disse...

Olha eu fiz e adorei viu,descobri seu blog a pouco tempo e gostei pois os tutoriais são simples e bem direto sem enrolação,concerta o código do outro post que é sobre paginação numerada no blogger faz tempo que eu busco por um código daqueles e só achava pra wordpress eu tnh um outro código mais não fica uma paginação tão bacana qnt essa sua,xerooo's visita o meu blog tá!

2 de junho de 2012 às 12:03
Josélia Moura disse...

porfirioinvintage.blogspot.com.br Meu blog...hahahahah

2 de junho de 2012 às 12:05
João Almeida disse...

Obrigado pelo carinho conosco e pelo blog. Volte sempre, pois sempre terá tutoriais para seu blog, ta?

2 de junho de 2012 às 12:17
Bruno Bezerra disse...

Gostei da matéria pessoal! Este botãozinho é muito importante principalmente para sites renomados com muito conteúdo!. Acho legal, que também podemos colocar imagens ao invés de nomes.

17 de janeiro de 2014 às 11:20

Postar um comentário