Cara Memasang Load More Post Ringan Dengan Klik Tombol Di Blog

    Mungkin beberapa blog lain sudah pernah membahas cara membuat atau cara memasang Load More Post dengan klik tombol di blog. Rata-rata saya lihat yang membahas artikel ini blog bule, jadi terkadang sulit dimengerti baik dari cara membuat, memasang, hingga penerapannya.

    Jadi tidak salah kalau saya membahasnya...

    Widget Load More Post itu semacam suatu widget yang berfungsi untuk menampilkan postingan selanjutnya atau postingan yang ada di navigasi blog hanya dengan klik tanpa harus pindah halaman. Dengan kata lain widget ini dapat menjadi pengganti navigasi yang ada di blog.

    Bila biasanya kita ingin melihat postingan lama dengan cara klik navigasi halaman di blog (Older Post), lalu dialihkan ke halaman baru. Dengan menggunakan load more post ini, anda tidak perlu berpindah halaman ketika ingin melihat artikel lama. Cukup dengan menekan tombol, postingan lama akan muncul dibawahnya.

    Bagi pengguna Wordpress, bila mereka ingin membuat load more post, maka mereka hanya tinggal menggunakan plugin. Berbeda dengan pengguna Blogger yang harus manual membuat scriptnya terlebih dahulu lalu memasangnya.

    Beberapa fitur dan kelebihan yang saya tawarkan dari widget ini antara lain:

    1. Super ringan
      - Tidak memerlukan jQuery, Pure JavaScript
      - Script tidak saya buat eksternal
      - JavaScript sudah saya kompres
    2. Tidak menyebabkan masalah apapun di PageSpeed Insights
    3. Pemasangan yang mudah
    4. Alternatif lain yang ampuh untuk menurunkan bounce rate
    5. Mempercantik tampilan blog
    6. dan masih banyak lagi...
    Bagaimana? Masih ragu untuk memasangnya? Widget ini sangat cocok bagi anda yang bounce rate nya sangat tinggi, bahkan sampai 70% keatas. Hal ini sudah saya buktikan sendiri, berikut bounce rate blog saya yang menggunakan Load More Post ini:

    Bounce Rate Kode Jarwo

    Kecil? Jelas... Berikut cara pemasangannya...

    Cara Memasang Load More Post Ringan Dengan Klik Tombol Di Blog


    Seperti biasa, buka Edit HTML, lalu cari kode </body>, dan masukkan kode berikut tepat di atasnya.

    <b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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: '<a class="js-load" href="javascript:;">Liat Artikel Lainnya</a>',
    loading: '<a class="js-load">Sabar gan...</a>',
    loaded: '<span class="js-load">Dah ah, capek!</span>',
    error: '<a class="js-load">Hadeh error!</a>'
    }
    });
    //]]></script>
    <style> .js-load{display:block;width:100%;text-align:center;font-size:20px;margin:20px}</style>
    </b:if></b:if>

    Simpan template dan lihat hasilnya. Kode diatas adalah Javascript yang berfungsi untuk memanggil post selanjutnya ketika di klik. Ganti kode diatas yang saya mark berwarna kuning dengan kata-kata anda sendiri. Misal sabar berarti saat loading, "Dah ah, capek!" berarti sudah habis atau mentok, dan "Hadeh Error" berarti ada error pada saat loading.

    Semoga widget Load More Post anda berhasil dipasang dan work atau bekerja dengan baik, karena terkadang widget ini tidak dapat berfungsi dengan baik pada beberapa template, jadi anda bisa tanyakan ke saya bila ada kesulitan.