Adicionar botão ir ao topo suave com jQuery para Blogger / Blogspot

Atualização: 05/04/13 - Relativo a alteração na hospedagem do script

Olá a todos! Essa ferramenta é muito interessante, e vale a pena inserir em seu blog. Por isso, disponibilizo hoje um modelo de script que proporciona um tipo de rolagem suave para o topo da página com uma biblioteca jQuery.

COMO ADICIONAR AO BLOGGER? 

É muito simples, basta apenas seguir duas simples etapas:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl + F, procure por: </ head>

3°passo: Adicione o seguinte código depois da tag encontrada no segundo passo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

4°passo: Salve e vamos para a instalação do estilo.

5°passo: Novamente procure por: </ head> e cole o seguinte código antes da tag encontrada:

<style type="text/css">#w2btoTop {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/AVvXsEgrQe0bbViabg4YC4sP9-F1GYaurlxZCfQsd58V7yFZUmjHGZRioXUOjPT80SDJoqtORqkwcQEA8jyG1jWlyFMbmLoo6x6kOJ_6CqrrEkpJDuo9fqwIOBw-GjCCiAgNNKRN0xhGUibk9qHI/) no-repeat left top;} #w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrQe0bbViabg4YC4sP9-F1GYaurlxZCfQsd58V7yFZUmjHGZRioXUOjPT80SDJoqtORqkwcQEA8jyG1jWlyFMbmLoo6x6kOJ_6CqrrEkpJDuo9fqwIOBw-GjCCiAgNNKRN0xhGUibk9qHI/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} #w2btoTop:active, #w2btoTop:focus {outline:none;} </style><script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCirc' }); }); </script>

Pronto! Se você puder salvar o modelo, você instalou o com sucesso o widget.

Share This :