infinite auto scroll di template median-ui

Hallo semua pada kesempatan kali ini saya akan membagikan cara menerapkan fitur infinite auto scroll pada template median-ui.

pada postingan saya sebelumnya saya sudah pernah memposting cara membuat infinite scroll di template viotoko, nah buat kalian pengguna template median-ui jika ingin menerapkan fitur seperti ini kalian tidak perlu menambahkan script apapun.

ya, karena template median-ui sendiri sebenarnya sudah support infinite auto scroll / auto load more, kalian hanya perlu mengaktifkanya saja dengan cara mengubah type pada javascriptnya, nanti akan di bahas di bawah ini, kita basa basi dulu ya biar ada ruang untuk iklan saya muncul 😁.

sebagian besar pengguna template median-ui mungkin banyak yang belum tau adanya fitur ini, karena memang tidak di publish oleh Muhammad Maki selaku Designer template median-ui itu sendiri.

karena fitur ini belum pernah atau belum ada di bahas di blog median-ui, maka saya akan mengbahasnya di sini, dari penglihatan saya pengunjung blog ini juga kebanyakan pengguna template median-ui dan mungkin saja di antara kalian ada yang membutuhkan informasi ini. ok langsung aja masuk ke pembahasannya di bawah ini.

Cara Menerapkan Fitur Infinite Auto Scroll Pada Template Median-Ui

silakan masuk ke blogger pilih tema dan edit html gunakan ctrl f dan carilah kode seperti di bawah ini.

<b:includable id='post-paginationMore'>
        <script>/*<![CDATA[*/ defer(function() { !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: '<div class="js-load no-post">No more post</div>', error: '<a class="js-load error" href="javascript:void(0)">Sorry error!</a>'} }); });/*]]>*/</script>
      </b:includable>

perhatikan kode yang saya tandai di atas seperti type: 0 silakan di ubah menjadi type: 1 atau bisa juga type: 2 , fungsi dari 3 type di atas akan saya jelaskan di bawah ini.

1. type: 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya.
2. type: 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.
3. type: 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.

jika sudah selesai silakan klik simpan dan lihat hasilnya,ok jadi sekian cara menerapkan fitur infinite auto scroll pada template median-ui semoga bermanfaat dan terima kasih sudah berkunjung.