Cara Memasang Load More Post di Blogger

Anda mungkin pernah melihat penerapan Load More Post atau Infinite Scrolling di Blogger. Tutorial kali ini akan menunjukkan kepada Anda bagaimana menerapkan Load More Post atau Infinite Scrolling di Blogger, sehingga pengunjung dapat dengan mudah menavigasi tanpa memuat ulang laman.

Bagaimana itu bekerja?
Setelah diterapkan Load More Post / Infinite Scrolling, maka itu akan berlaku untuk semua postingan Blogger di halaman indeks (beranda, arsip, halaman label).

Demo
Untuk melihatnya secara langsung, lihat demo di bawah ini. Ketika Anda menggulir ke bawah ke bagian bawah halaman, Anda akan melihat tombol "Load More". Setelah Anda klik, postingan berikutnya yang diatur untuk ditampilkan akan dimuat di bawahnya.

Preview

Cara Memasang Load More Post di Blogger

1. Masuk ke akun Blogger.
2. Buka menu 'Theme' dan klik tombol 'Edit HTML', tekan tombol CTRL + F atau (Command + F) untuk membuka kotak pencarian.
3. Ketikkan tag di bawah ini pada kotak pencarian dan tekan ENTER.

</body>

4. Tepat di atas tag </body> tambahkan skrip di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![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: '<a class="js-load" href="javascript:;">Load More</a>',
loading: '<a class="js-load">Loading...</a>',
loaded: '<span class="js-load">The End</span>',
error: '<a class="js-load">Oops! Error</a>'
}
});
//]]></script>
<style type='text/css'>.js-load{display: block;padding: 2px;margin: 0 43% 0 43%;font-size: 14px;border: solid 1px #ff5722;background: #ff5722;color: #fff;border-radius: 10px;}@media only screen and (max-width: 980px) {.js-load{display: block;padding: 2px;margin: 0 38% 0 38%;font-size: 14px;border: solid 1px #ff5722;background: #ff5722;color: #fff;border-radius: 10px;}}</style>
</b:if></b:if>

5. Klik tombol 'Save' dan cek blog Anda.

Jika tombol Load More tidak muncul, ada kemungkinan javascript older post yang lama masih tersimpan. Saran saya coba Anda cari dan hapus kode older post yang lama.

Demikian tutorial Cara Memasang Load More Post di Blogger, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.