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

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/AVvXsEgs-ELk8-OH7fmwX-zcjm1_vKGms0u5EKj7XB_-1HYwOebUBsrapur9N2X6GTadk47KlDuCBe-iz03qCaKL0nw1949d6sp0-5sNHakuDrJTZjeHIuXb8x632PmKq4agxqmD3Pqf794t3R1z/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-ELk8-OH7fmwX-zcjm1_vKGms0u5EKj7XB_-1HYwOebUBsrapur9N2X6GTadk47KlDuCBe-iz03qCaKL0nw1949d6sp0-5sNHakuDrJTZjeHIuXb8x632PmKq4agxqmD3Pqf794t3R1z/) 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.



Nenhum comentário:

Postar um comentário


Restaurar um blog excluido

Se você acidentalmente excluiu seu blog e quer tê-lo de volta, pode recuperá-lo durante um breve período após a exclusão. Para desfaz...