In this post i will show you how you can enable infinite scrolling to blogger or add load more posts button.It is ajax based loading script that will make the blogger to load more posts on the same page instead of realoading webpage and giving links at the end of page.
You can add load more posts button at the end of your page or there is option to load more posts as the user scroll down the webpage.Once you have applied ajax load more posts script to your blog it will be automatically added on all the pages of your blog e.g homepage,archive pages.You can not add it on indivisual pages or posts.
Benefits
By using ajax load more scripts you will have some advantages over other blogs.
- Provide healthy and good user experience and make your blog look professional.
- Save users from reloading the pages and instead provides all the content on the same webpage which make it easy for the user to see your content.
- It does not slow down your blog.
How To Add Ajax Load More Posts Script In Blogger
Follow the given steps in order to add load more posts button to your blog.
Step 1 : Go to Blogger>Dashboard>Template>Edit HTML
Step 2 : Now click anywhere in the code and press CTRL+F in order to open search box.
Step 3 : Now Search For </body> tag.
Step 4 : Just above the </body> tag add the following script.
Note : If you want Load More Post Button Add The Below Script
Note : If you want infinite scrolling as the user scroll down add below code.<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> //<![CDATA[ function 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/AVvXsEjCK9UnrId7SB3JrfsZsPEK64lNZg9QzZ7fPIXPSFZZAexjVuZuOvqOfJkli4boRz47DFD18PNWBBHnUMVJt6G84aeb4g9WYWfGnFqtzXePzvqnyJOa8lNvJtqSZr4jtwiMnEBvtL4n43jT/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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> <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 more 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/AVvXsEjCK9UnrId7SB3JrfsZsPEK64lNZg9QzZ7fPIXPSFZZAexjVuZuOvqOfJkli4boRz47DFD18PNWBBHnUMVJt6G84aeb4g9WYWfGnFqtzXePzvqnyJOa8lNvJtqSZr4jtwiMnEBvtL4n43jT/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 script uses JQuery Library, so if you have it already remove the line highlighted green from the code.
Step 5 : Now click save button and you are all done, check your load more posts button or infinite scrolling.
Thanks for Visiting Blogfowl.
Tagged With
- add load more posts button to blogger
- add infinte scrolling to blogger
- add ajax load more post script to blogger
- add load more posts button to blogger custom template
- show load more posts button instead of number links in blogger
- ajax infinite scrolling script for blogger
- enable infinte scrolling to blogger blog
- load infinte posts as scroll down for blogger
- infinte posts loading script for blogger