Pada update terbaru invinite scroll sudah menjadi navigasi bawaan template, jadi anda tidak perlu melakukan apapun dengan tutorial ini.

Apa itu Infinite Scroll?

Singkatnya, widget ini berfungsi untuk menampilkan artikel selanjutnya atau postingan yang ada di navigasi blog hanya dengan klik tanpa harus pindah halaman. Dengan kata lain widget ini dapat menjadi pengganti navigasi blog bawaan blogger, widget ini juga dikenal dengan nama Widget Load More.

Pada navigasi bawaan blogger Anda akan dialihkan ke halaman baru ketika ingin melihat postingan selanjutnya, dengan menggunakan infinte scroll Anda tidak perlu berpindah halaman ketika ingin melihat artikel lama, cukup dengan menekan tombol load more maka postingan lama akan otomatis muncul dibawahnya.

Kelebihan dari widget ini diantaranya adalah pemasangan yang sangat mudah, mempercantik tampilan blog serta cukup ampuh menurunkan bounce rate. Dengan script yang sangat ringan, widget ini juga tidak menyebabkan masalah apapun di Pagespeed Insights, dan masih banyak keuntungan lainnya yang bisa Anda dapat.

Tutorial Memasang Infinite Scroll di Blog

Seperti biasa pada menu Edit HTML carilah kode </body> atau scroll sampai bagian paling bawah template ini dan tambahkan kode dibawah ini tepat diatasnya.

<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",' '),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",' '),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: '.hentry', anchors: '.blog-pager', anchor: '.older-link'}, text: {load: '<a class="js-load load-more" href="javascript:void(0)">Load more</a>', loading: '<a class="js-load wait"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/></path></svg><span>Please wait...</span></a>', loaded: '<span class="js-load nolink">No more post</span>', error: '<a class="js-load error" href="javascript:void(0)">Sorry error!</a>'} }); /*]]>*/</script>
</b:if>

Simpan pada template dan lihat perbedaanya. Kode diatas adalah javascript yang berfungsi untuk memanggil postingan/artikel selanjutnya ketika di klik tanpa pindah halaman. Ganti pada bagian kode yang sudah ditandai dengan kata-kata Anda sendiri.

<b:if cond='data:view.isMultipleItems'>

// Tag conditional ini berfungsi untuk menampilkan script ini pada halaman homepage serta halaman index saja, tidak akan tampil pada halaman posting

Semoga bermanfaat. Referensi :
blog.kodejarwo.com/2018/02/cara-memasang-load-more-post.html