Cara Memasang Load More Post Ringan Dengan Klik Tombol Di Blog
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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 14 Juli 2018 19.02

Kadang memang nda work untuk semua template, karena tiap template beda-beda struktur.

Balas
Adam B. Saputra Kode Jarwo
Adam B. Saputra
# 14 Juli 2018 14.59

Gan di template yang saya pke kok nggk work ya?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 16 Juni 2018 09.44

Entah, mungkin beda struktur template dsb

Balas
Edger Deuter Kode Jarwo
Edger Deuter
# 15 Juni 2018 21.42

hm, di saya kok gak work ya?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 15 Juni 2018 10.01

Saya coba work

Balas
Edger Deuter Kode Jarwo
Edger Deuter
# 14 Juni 2018 20.19

di Page Search gak Work ya mas?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 7 Juni 2018 22.58

Blog ini pakai load more juga kang, bisa dilihat di homepage nya...

Balas
Arif Afandi Kode Jarwo
Arif Afandi
# 7 Juni 2018 20.39

Demonya kaga bisa di liat kang!

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 22 Maret 2018 08.25

Kemungkinan template nda support...

Balas
Nerslicious - Nugraha Fauzi Kode Jarwo
Nerslicious - Nugraha Fauzi
# 22 Maret 2018 02.10

Keren ini. Oh iya bang, saya sudah memasangnya, tapi kok thumbnail post selanjutnya setelah diklik Liat Artikel Lainnya jadi nggak muncul ya? Mohon bantuannya bang ... Terimakasih.

Balas
Naufal Muhammad Al Hikam Kode Jarwo
Naufal Muhammad Al Hikam
# 2 Maret 2018 18.18

Ajib dah bang :D

Balas