Add Charge To A Greater Extent Than Posts Or Interplanetary Space Scrolling To Blogger

You mightiness convey seen the implementation of interplanetary space scrolling at Facebook, Twitter or Google+. Instead of showing Older / Newer posts links, nosotros tin shipping away charge posts dynamically whenever a "Load to a greater extent than posts" clitoris is clicked, or past times scrolling downward the page. This tutorial volition demo y'all how to implement Ajax based loading script that volition add together Load More Posts or Infinite Scrolling to Blogger, as well as thence that visitors tin shipping away easily navigate without reloading the page.

How it works?

- You convey the pick to add together a 'Load More Posts' clitoris or charge automatically the older posts equally visitors scroll downward the page.
- Once implemented, Load More Posts / Infinite Scrolling applies to all Blogger posts on index pages (homepage, archive, label pages). It can't live on added on private posts.

Demo

To come across it live, banking concern tally out the demo below. When y'all scroll downward to the bottom of the page, y'all volition come across the "Load More Posts" button. Once y'all click it, the side past times side three posts laid to display volition charge below.

Demo

Adding Load More Posts or Infinite Scrolling to Blogger

1. Log into your Blogger account as well as click on your spider web log where y'all desire to add together it.
2. Go to 'Theme' as well as click the 'Edit HTML' clitoris to opened upwardly the Template editor > click anywhere inwards the code surface area as well as press CTRL + F keys (or Command + F) to opened upwardly the search box.

3. Type the tag below inwards the search box as well as press ENTER to discovery it:

</body>

4. Just higher upwardly the </body> tag, add together the script below:

a. If y'all desire to charge posts alongside 'Load More Posts' clitoris similar inwards the demo blog, add together this script:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
business office resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtb6uZJSdCsa1jW0451pRBuSOKRAc-eI03wDzJJDjxUsIVqWfjTZjfWHcfCcKj9_a1i62FwDRf-u74iC5HUeTH6_3GyAtFW9Clv0EOu0SbT8pjYFw3GNwtZU2NWErQ7Mju8w8UuU_QZfB/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery);
//]]>
</script>
</b:if></b:if>

b. If y'all desire to add together the interplanetary space scrolling without button, glue this instead:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type="text/css">.status-msg-wrap{display:none;}</style>
<script type='text/javascript'>
//<![CDATA[
!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load to a greater extent than posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtb6uZJSdCsa1jW0451pRBuSOKRAc-eI03wDzJJDjxUsIVqWfjTZjfWHcfCcKj9_a1i62FwDRf-u74iC5HUeTH6_3GyAtFW9Clv0EOu0SbT8pjYFw3GNwtZU2NWErQ7Mju8w8UuU_QZfB/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);
//]]>
</script>
</b:if></b:if>

Note: This code uses jQuery library, as well as thence if y'all already convey jQuery on your page, delight withdraw the line of piece of employment inwards crimson highlighted above.

5. Click 'Save template' clitoris as well as banking concern tally the 'Load More Posts' clitoris / Infinite Scrolling inwards your Blogger blog.

Conclusion

That's it! So this is how nosotros tin shipping away easily add together Load More Posts / Infinite Scrolling to Blogger. From forthwith on, our visitors tin shipping away rest inwards same page as well as navigate through interplanetary space break of posts on the fly!

Share this post