How to Add Ajax Pagination or Load More Button in Blogger

Hi guys, Hope you doing well. Today I am back with another amazing Post..In this I'll Show How to Add Ajax Pagination in Blogger or in simple terms Load More Button .

What is Ajax ?

Ajax (Asynchronous JavaScript and XML) could be a net technology that permits an internet page to dynamically update content while not reloading the page among the browser. The web site becomes a lot of interactive and responsive with the employment of this technology. Ajax is supported by the majority the visual net browsers... so today, I'll show you the way to setup some Ajax Pagination.

How Setup In Blogger?

Add Basic Css

Open Blogger Dashboard ,Then go to Themes Section and Click on Edit HTML .
Now search for </b:skin>and Paste Below Css just Above It.


 .blog-pager{margin:0;width:100%;height:auto;display:grid;place-items:center}
button.kkfs-load,button.kkfs-error,button.kkfs-done{min-width:150px;color:#fff;text-transform:capitalize;border-radius:20px;border:2px solid #fff;font-weight:bold;padding:0.75rem 1rem;border-radius:10px}
.kkfs-loading:after{content:'';display:block;width:40px;height:40px;box-sizing:border-box;margin:0;border:2px solid var(--info);border-right-color:#eee;border-radius:100%;animation:spinner .65s infinite linear;transform-origin:center}
@-webkit-keyframes spinner{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
@keyframes spinner{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
button.kkfs-load{background:linear-gradient(to right,#22a7f0,#0081ff)}
button.kkfs-done{background:#2b9753}
button.kkfs-error{background:#d52a2a}

Ajax Script

Now Search for </body> And Paste Below Script Just Above </body>

<b:if cond='data:view.isMultipleItems'> 
<script>//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0,
target: { posts: '.blog-posts', post: '.post-outer', anchors: '.blog-pager', anchor: '.blog-pager-older-link' }, text: {
load: '<button class="kkfs-load">Load More</button>',
loading: '<div class="kkfs-loading"></div>',
loaded: '<button class="kkfs-done">No More Posts...</button>',
error: '<button class="kkfs-error">Error!!</button>'
} }); //]]></script>
</b:if>

Make Sure you have installed Latest jQuery to Your Website if not installed then add this code with above script

<script defer="" async="" src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Conclusion

CSS , Infinite Scroll Javascript and jQuery are used to Create this Ajax Pagination. In this Post I Shared How to Add Ajax Pagination or Load More Button in Blogger . I hope this tutorial can be quite useful for all you bloggers and developers. Thank you for visiting our website.