Cara Memasang Infinite Scroll Blogger/Load More Post Dengan dan Tanpa Reload

Memasang infinite scroll blogger atau yang biasa disebut load more post sudah banyak digunakan oleh beberapa blogger bahkan website berita juga

Baca Juga

Memasang infinite scroll blogger atau yang biasa disebut load more post sudah banyak digunakan oleh beberapa blogger bahkan website berita juga sudah memasang tombol load more ini. Namun ada yang juga yang masih belum memasanganya karena beberapa alasan.

Alasan utamanya adalah terkadang script ini tidak bekerja dengan baik untuk beberapa kode template blog. Namun untuk script load more post yang saya share ini, kemungkinan bisa bekerja dengan baik untuk semua blog.

Kode script inifinite scroll ini sebenarnya sudah pernah saya bahas di blog ini dan kode ini saya dapatkan dari blognya mbak Igniel, igniel.com. Disana ada 2 script kalau tidak salah, yang satunya menggunakan Jquery dan tidak. Nah untuk kode di artikel ini, saya gunakan yang tanpa Jquery sehingga membuat loading blog tidak terganggu.

Apa itu Infinite Scroll atau Load More Post?

Infinite scroll adalah sebuah script yang digunakan untuk menggantikan fungsi dari page navigation blog yang biasanya ada di halaman depan atau homepage. Dengan adanya script ini, pengguna blog tidak perlu lagi berpindah dari halaman satu ke halaman yang lain. Semua halaman akan tampil dalam satu tampilan.

Script load more post ini yang pernah saya temukan, ada 2 yang bisa digunakan dengan kode yang berbeda. Namun didalam artikel ini saya akan membagikan 1 script dengan 2 fungsi yang berbeda yaitu:

Auto Load on Scroll. Maksudnya adalah semua halaman artikel di homepage akan tampil semuanya saat di scroll kebawah secara otomatis dan tidak perlu melakukan klik tombol. Contoh penerapannya adalah di homepage blog digitalpoin.com ini

Auot Load on Clcik. Halaman post di homepage akan tampil semuanya setelah tombol load di klik. Contoh penerapannya ada di demo.

Dari kedua fungsi diatas, saya hanya menggunakan 1 script saja dan script yang digunakan ini pun tidak perlu menggunakan jQuery jadi sangat aman dan tidak mempengaruhi loading blog.

Kenapa Harus Menggunakan Infinite Scroll ?

Sebenarnya tidak ada alasan khusus untuk menggunakan script ini, mungkin hanya sebatas keinginan saja agar tampilan blog lebih sederhana dan tidak terlalu banyak menggunakan tombol dan link. Namun dari beberapa blog yang membahas topik ini, ada alasan tertentu yang dapat mempengaruhi performa blog dengan menggunakan script ini yaitu:

1. Lebih SEO Friendly
2. Script tidak menggunakan jQuery.
3. Tampilan responsive atau mobile friendly.
4. Script mudah digunakan dan tampilannya mudah di edit.
5. Membantu loading blog lebih cepat.
6. Halaman homepgae tampil dalam satu halaman.
7. Dapat menurunkan bouce rate, jika pengunjung selalu berada di homepage :)
8. Script dapat digunakan oleh semua blog.

Bagaimana Cara Memasang Script Load More Post ini?

Seperti yang saya sebutkan diatas, ada 1 script yang bisa digunakan dengan 2 fungsi berbeda. Namun sebelum memasang script ini anda harus memasang kode CSSnya terlebih dulu untuk menampilkan tombol loadingnya. Tenang kode CSS ini hanya sedikit dan tidak mempengaruhi performa loading blog anda.

Kode CSS

Pasang kode CSS dibawah ini kedalam kode template blog anda. Kode CSS ini sudah saya kompres agar anda tidak perlu lag mengkompressnya. Untuk memasangnya, pasang saja kedalam kode CSS blog anda.

.js-load,.js-loading,.js-loaded{display:block;background:#414141;color:#fff;display:inline-block;padding:8px 20px;-webkit-transition:all .2s;transition:all .2s;border-radius:3px;} a.js-load,span.js-loaded,span.js-loading,a.js-load:visited,{transition:all .2s;background:#c7c7c7;color:#fff!important} .js-loading::after{border:2px solid #c7c7c7} .a.js-load:hover,span.js-loaded:hover,span.js-loading:hover{background:#c7c7c7}.js-loading::after{content:"";width:10px;height:10px;vertical-align:middle;margin-left:8px;margin-left:.5rem;margin-bottom:3px;display:inline-block;border-top:2px solid transparent;-webkit-animation:load-animate infinite linear 1s;animation:load-animate infinite linear 1s}.js-load svg{width:20px;height:20px;vertical-align:-6px}.js-load svg path{fill:#ffffff} @-webkit-keyframes load-animate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} @keyframes load-animate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

Kode Script Infinite Scroll

Kode script ini adalah kode yang saya gunakan pada blog ini dan juga pada demo yang telah saya buatkan. Jadi saya yakin untuk penggunaannya sangat mudah diterapkan dan dapat berfungsi dengan baik.

Pasang kode script ini diatas kode </body>

!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', anchors: '.blog-pager', anchor: '.blog-pager-older-link' }, text: {
load: '<a class="js-load load-more" href="">Artikel Lainnya</a>',loading: '<a class="js-load wait"><span>Please wait...</span></a>',loaded: '<div class="js-load no-post">No more post</div>',error: '<a class="js-load error" href="#">Sorry error!</a>'} });

Perhatikan tanda kode diatas yang saya warnai, type: 0:

• Nilai 0 ini berarti fungsi script hanya untuk On Click atau halaman akan muncul setelah tombol di klik.
• Nilai 0 diganti 1 maka script akan berfungsi menjadi otomatis atau On Scroll. Halaman akan otomatis terbuka saat di scroll kebawah.

Jika anda menginginkan tombolnya scrollnya otomatis, gunakan nilai evennya menjadi 1. Contohnya seperti homepage blog ini.

Perhatikan kode posts: '.blog-posts', post: '.post', anchors: '.blog-pager', anchor: '.blog-pager-older-link' Penggunaan kode ini biasanya berbeda untuk setiap kode template. Silahkan pilih salah satu kode dibawah ini untuk digunakan jika script tidak berfungsi dengan baik.

• posts: '.blog-posts', post: '.post', anchors: '.blog-pager', anchor: '.blog-pager-older-link'
• posts: '.blog-posts', post: '.hentry', anchors: '.blog-pager', anchor: '.older-link'

Jika kode diatas belum berfungsi, carilah elemen yang ada didalam kode tag article yang menjadi kode strukturnya.

Untuk melihat hasilnya, klik tombol demo dibawah ini dan lihat pada bagian bawah atau footer blognya. Disana ada tombol Artikel Lainnya, klik tombol tersebut untuk mengetahui fungsi dari tombol infinite ini.

Lihat DEMO Infinite Scroll

Jadi tidak ada perlakuan khusus untuk menggunakan script ini, tidak perlu jQuery, tidak perlu mengedit atau mengurangi kode template bawaan. Namun jika tampilan pageview blog masih muncul, cari saja kode CSS dari tampilan pageview tersebut dan tambahkan display:none untuk menyembunyikan tampilan tersebut.

Bagaimana? sangat mudah bukan cara memasang infinite scroll blogger atau load more post ini? Selain mudah digunakan, anda juga bisa dengan mudah untuk melepasnya jika tidak ingin menggunakan lagi. Dan tentunya anda juga tidak perlu mengatur ulang kode template bawaan blog karena yang dihapus hanyalah kode CSS dan Script load more post ini. Selamat mencoba.