Add Load More Posts or Infinite Scrolling to Blogger

Add Load More Posts or Infinite Scrolling to Blogger - Hello friend Blogspot Help, In the article you read this time with the title Add Load More Posts or Infinite Scrolling to Blogger, We have prepared this article well for you to read and take the information in it. Hopefully the contents of the post Article blogger, Which we write you can understand. All right, happy reading.

Title : Add Load More Posts or Infinite Scrolling to Blogger
link : Add Load More Posts or Infinite Scrolling to Blogger

Baca juga


Add Load More Posts or Infinite Scrolling to Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing Older / Newer posts links, we can load posts dynamically whenever a "Load more posts" button is clicked, or by scrolling down the page. This tutorial will show you how to implement Ajax based loading script that will add Load More Posts or Infinite Scrolling to Blogger, so that visitors can easily navigate without reloading the page.

How it works?

- You have the option to add a 'Load More Posts' button or load automatically the older posts as visitors scroll down the page.
- Once implemented, Load More Posts / Infinite Scrolling applies to all Blogger posts on index pages (homepage, archive, label pages). It can't be added on individual posts.

Demo

To see it live, check out the demo below. When you scroll down to the bottom of the page, you will see the "Load More Posts" button. Once you click it, the next 3 posts set to display will load below.




Adding Load More Posts or Infinite Scrolling to Blogger

1. Log into your Blogger account and click on your blog where you want to add it.
2. Go to 'Template' and click the 'Edit HTML' button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box.


3. Type the tag below in the search box and press ENTER to find it:
</head>
4. Just above the </head> tag, add the following scripts/css styles:

a. If you want to load posts with 'Load More Posts' button like in the demo blog:
<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[
!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();0>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);//]]>
</script>
<style type="text/css">
.load-more{display:block;text-align:center;margin:20px auto;}.load-more a,.load-more a:hover{text-decoration:none;font:bold 11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;}
</style>
</b:if>
</b:if>

b. If you want to add the infinite scrolling without button, paste 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;'>
<script type='text/javascript'>
//<![CDATA[
!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");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();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();150>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);
//]]>
</script>
</b:if></b:if>

Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.

5. Click 'Save template' button and check the 'Load More Posts' button / Infinite Scrolling in your Blogger blog.

Conclusion

That's it! So this is how we can easily add Load More Posts / Infinite Scrolling to Blogger. From now on, our visitors can stay in same page and navigate through infinite number of posts on the fly!


Thus Articles Add Load More Posts or Infinite Scrolling to Blogger

That's an article Add Load More Posts or Infinite Scrolling to Blogger This time, hopefully can benefit for you all. Okay, see you in other article posting.

You are now reading the article Add Load More Posts or Infinite Scrolling to Blogger With the link address http://inaredhouse.blogspot.com/2016/09/add-load-more-posts-or-infinite.html

0 Response to "Add Load More Posts or Infinite Scrolling to Blogger"

Post a Comment