Arquivos do Website:

Como colocar scroll infinito nos artigos do Blogger? - Infinite scrolling load more post for Blogger


Código JavaScript para você colocar scroll infinito nos artigos de blogs hospedados na plataforma Blogger! Recentemente, andei fazendo alguns testes aqui no blog, utilizando scroll infinito nos artigos; gostei dos resultados, mas, por enquanto não vou utilizá-lo! Bom, se você tem um blog hospedado na plataforma Blogger e, deseja colocar scroll infinito nos artigos, a primeira coisa que você deve fazer é: um backup do template do seu blog (faça login no painel de controle do Blogger ==> Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo), caso você cometa algum erro no procedimento, ficará mais fácil para recuperar o seu blog!


Imagem: www.photo-dictionary.com

Depois que você fizer backup do template do seu blog, clique em "Editar HTML". Localize no código fonte do template, a tag "]]></b:skin>" e, cole logo acima desta tag, isto:

.status-msg-wrap{display: none !important;}


Esta linha de CSS vai evitar que apareça a "famosa frase", "Mostrando postagens com marcador XXXXXXX. Mostrar todas as postagens", quando alguém clicar nos marcadores de arquivos do blog. Sem esta linha de CSS, sempre que alguém clicar nos marcadores de arquivos do blog, a frase aparecerá duplicada!

Agora, localize no código fonte do seu blog, a tag "</body>" e, cole logo acima dela, isto:

<script type='text/javascript'>

//<![CDATA[



(function($) {

var loadingGif = 'https://lh5.googleusercontent.com/-jG8hce7lDB0/U7ryJEn6FmI/AAAAAAAAOEE/VVlmYl-h5LI/s32/loading.GIF';

var olderPostsLink = '';

var loadMoreDiv = null;

var postContainerSelector = 'div.blog-posts';

var loading = false;



var win = $(window);

var doc = $(document);

// Took from jQuery to avoid permission denied error in IE.

var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;



function loadDisqusScript(domain) {

  $.getScript('http://' + domain + '.disqus.com/blogger_index.js');

}



function loadMore() {

  if (loading) {

    return;

  }

  loading = true;



  if (!olderPostsLink) {

    loadMoreDiv.hide();

    return;

  }



  loadMoreDiv.find('a').hide();

  loadMoreDiv.find('img').show();

  $.ajax(olderPostsLink, {

    'dataType': 'html'

  }).done(function(html) {

    var newDom = $('<div></div>').append(html.replace(rscript, ''));

    var newLink = newDom.find('a.blog-pager-older-link');

    if (newLink) {

      olderPostsLink = newLink.attr('href');

    } else {

      olderPostsLink = '';

      loadMoreDiv.hide();

    }



    var newPosts = newDom.find(postContainerSelector).children();

    $(postContainerSelector).append(newPosts);



    // Loaded more posts successfully.  Register this pageview with

    // Google Analytics.

    if (window._gaq) {

      window._gaq.push(['_trackPageview', olderPostsLink]);

    }

    // Render +1 buttons.

    if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) {

      window.gapi.plusone.go();

    }

    // Render Disqus comments.

    if (window.disqus_shortname) {

      loadDisqusScript(window.disqus_shortname);

    }

    // Render Facebook buttons.

    if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) {

      window.FB.XFBML.parse();

    }

    // Render Twitter widgets.

    if (window.twttr && window.twttr.widgets && window.twttr.widgets.load) {

      window.twttr.widgets.load();

    }



    loadMoreDiv.find('img').hide();

    loadMoreDiv.find('a').show();



    loading = false;

  });

}



function getDocumentHeight() {

  return Math.max(

      win.height(),

      doc.height(),

      document.documentElement.clientHeight);

}



function handleScroll() {

  var height = getDocumentHeight();

  var pos = win.scrollTop() + win.height();

  if (height - pos < 150) {

    loadMore();

  }

}



function init() {

  if (_WidgetManager._GetAllData().blog.pageType == 'item') {

    return;

  }



  olderPostsLink = $('a.blog-pager-older-link').attr('href');

  if (!olderPostsLink) {

    return;

  }



  var link = $('<a href="javascript:;">Carregar mais artigos</a>');

  link.click(loadMore);

  var img = $('<img src="' + loadingGif + '" style="display: none;">');



  win.scroll(handleScroll);



  loadMoreDiv = $('<div style="text-align: center; font-size: 150%;"></div>');

  loadMoreDiv.append(link);

  loadMoreDiv.append(img);

  loadMoreDiv.insertBefore($('#blog-pager'));

  $('#blog-pager').hide();

}



$(document).ready(init);



})(jQuery);



//]]>

</script>


Clique em "Salvar modelo".

Este código JavaScript carregará de forma automática os artigos das páginas do seu blog, utilizando o efeito de scroll infinito. Funciona nos artigos da página inicial e nos artigos dos marcadores do blog. Foi testado nos navegadores IE8, Firefox e Google Chrome (está funcionando perfeitamente).

Desenvolvido por: Muthu Kannan - http://blog.manki.in - pequenas modificações por: Paulo Roberto - www.dicasonlinegratis.com