Inserir rolagem infinita no Blogger

A rolagem infinita, também conhecida como "scroll infinito", é um recurso incrível que utiliza jquery e que até então eu nem mesmo imaginava que poderia ser feito no Blogger. Esse script está presente em muitos blogs do Tumblr, e até mesmo em redes sociais como Facebook e Twitter.

Com a rolagem infinita, os usuários que acessam seu blog podem ter acesso a todas as suas postagens, sem a necessidade de ficar navegando entre várias páginas, apenas rolando a página para baixo, enquanto os posts vão carregando dinamicamente.

E o melhor de tudo é que apesar disso, a página não fica tão pesada, pois caso o usuário não role a página para baixo, esses artigos não serão carregados.

Para ver um exemplo em tempo real desse recurso funcionando, basta acessar o seguinte blog de testes.

Deixando o papo de lado, vamos ao que interessa.

Inserindo a rolagem infinita no Blogger/Blogspot

Primeiramente vale ressaltar que se em seu blog você já utiliza um script de "numeração", você deve primeiro retirá-lo para que o recurso funcione corretamente.

1° passo: Acesse o painel do Blogger e clique na opção do blog que você deseja adicionar a rolagem infinita;

2° passo: Clique na aba "Modelo" localizada no lado esquerdo da página;

Antes de continuar, é recomendável que você faça um backup do seu template, para que caso aconteça algum erro baste voltar ao modelo antigo.

3° passo: Clique em "Editar HTML";

4° passo: Assim que o editor HTML estiver completamente carregado, clique em qualquer trecho do código, aperte as teclas "CTRL+F" e pesquisa pelo seguinte trecho:

</head>
5° passo: Logo ACIMA cole o seguinte código:

<style>
#scroll-link {
background: linear-gradient(to bottom, #F0F0F0 0%,#F9F9F9 100%);
border: 1px solid #EEE;
color: #333;
text-shadow: 0 -1px 0 #fff;
text-align: center;
padding: 7px 10px 9px;
font-weight: 700;
font-size: 14px;
display: block;
}
#scroll-link:hover {
background: linear-gradient(to bottom, #DDDDDD 0%,#F9F9F9 100%);
text-decoration: none;
}
</style>
<script src='http://code.jquery.com/jquery-1.10.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/22915350133/infinite-scroll.js' type='text/javascript'/>
6° passo: Salve e verifique se tudo está funcionando corretamente. Caso contrário, use o backup que recomendei salvar ou retire o código dito acima.

Espero que tenha gostado. Até a próxima!

Gostou? Compartilhe:

Tweet