Cara Memasang Load More Post Menggunakan Jquery Ajax di Blogger

Halo sobat blogger. kali ini saya akan membahas tentang bagaimana cara memasang fitur load more untuk mengambil konten lain pada blog dengan menggunakan Jquery Ajax.

Selain dengan fitur load more, ada juga fitur numbered page navigation atau halaman bernomor yang sering dijumpai. Yang saya tidak sukai dari sistem halaman bernomor adalah saat membuka halaman lain harus reload halaman dulu.

Berbeda dengan cara kerja Load More Posts, kita bisa mengambil suatu konten tanpa mereload halaman.

Fitur ini sebenarnya sudah saya terapkan pada template yang saya buat dan sudah saya bagikan gratis pada artikel sebelumnya, berikut ini link templatenya.

Demo :
Frezhify – free and open source blogger template.

Sebelum kita mulai ngoding, ada baiknya jika sobat pahami terlebih dahulu mengenai AJAX dan JQuery.

Apa itu Ajax

Ajax merupakan singkatan dari Asynchronous Javascript and XMLHTTP. Ajax merupakan suatu teknik pemrograman pada web untuk membuat aplikasi web menjadi interaktif.

Asynchronous artinya tidak langsung, maksudnya kita merequest data ke server di sisi background.

Singkatnya dengan Menggunakan AJAX ini kita bisa mengambil data secara langsung dan tidak perlu reload halaman secara keseluruhan.

Apa itu JQuery

Jquery adalah sebuah library JavaScript. Didalamnya terdapat banyak fungsi yang sudah siap pakai.

Nah kita akan menggunakan AJAX dengan bantuan library Jquery ini agar lebih mudah dan cepat untuk dipahami.

Cara Memasang Load More di Blog

Oke langsung saja kita mulai ngodingnya, silahkan simak langkah langkah berikut ini.

Jika kamu belum memasang Jquery pada blog kamu, silahkan kamu pasang dulu dengan cara meletakan kode berikut ini sebelum tag </body>.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Dan juga jika kamu memasang Navigasi Halaman Bernomor, silahkan dihapus terlebih dahulu. Biasanya menggunakan Javascript, cari saja dibagian bawah blog kalian. Kalau bingung komen saja dibawah kirim kan link blog kamu, nanti saya bantu.

Untuk cara memasangnya saya bagi menjadi 2 bagian, frontend dan backend.

1. Membuat Button Load More

Oke pertama-tama kita perlu membuat button Load Morenya dulu, berikut ini contoh scriptnya (jika ingin dimodifikasi, silahkan).

Berikut ini adalah code CSS untuk button nya, silahkan letakkan sebelum kode //]></b:skin> atau didalam tag <style> </style>.

/* Load More Button by Arfan.id */#blog-pager.loadmore{margin:20px 0;padding:10px 0;display:block;text-align:center}#blog-pager .loadmore-btn{cursor:pointer;padding:8px 24px;background:#4285f4;color:#fff;border-radius:50px;font-family:'Quicksand',sans-serif;font-weight:600;outline:0;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}#blog-pager .loadmore-btn.loading,#blog-pager .loadmore-btn.loading:hover,#blog-pager .loadmore-btn.no-more,#blog-pager .loadmore-btn.no-more:hover{background:#fff;color:#888;cursor:wait}#blog-pager .loadmore-btn.no-more{cursor:default}#blog-pager .loadmore-btn:hover{color:#fff;background:#3c79de}

Selanjutnya kita pasang tombolnya. Cari tag dengan atribut id='blog-pager' lalu hapus kode yang ada didalam tag tersebut, dan ganti dengan kode berikut ini.

<a class="loadmore-btn" expr:href="https://www.alamkoding.web.id/2019/08/data:olderPageUrl">Load More</a>

Sehingga menjadi seperti ini.

<div id='blog-pager' class="loadmore"> <a class="loadmore-btn" expr:href="https://www.alamkoding.web.id/2019/08/data:olderPageUrl">Load More</a></div>

Lalu klik Simpan Tema.

Jika sudah silahkan sobat lihat dulu hasilnya pada blog sobat. Sudah ada belum tombolnya?

Kok belum bisa diklik sih min? Iya lah kan kita baru buat tombolnya. Selanjutnya baru bagian back-end nya menggunakan JQuery Ajax.

2. Membuat Fitur Load More Menggunakan JQuery Ajax

Pastikan sobat sudah memasang library Jquery nya ya. Dan saya sarankan gunakan Jquery yang versi 2, 3 atau yang lebih baru.

Silahkan kamu letakan kode berikut ini sebelum tag </body>.

<script>//<![CDATA[$(document).on('click','.loadmore-btn', function(e){   e.preventDefault();   let nextLink = $(this).attr('href');   let loadmoreBtn = $('#blog-pager .loadmore-btn');   if(nextLink){      $.ajax({         url: nextLink,         beforeSend: function(){           loadmoreBtn.addClass('loading').text('Loading...');         },         complete: function(){           loadmoreBtn.removeClass('loading');         },         success: function(html){           let rslt = $(html).find('#Blog1 .blog-posts').html();           let nextPage = $(html).find('#Blog1 .loadmore-btn').attr('href');           $('.blog-posts').append(rslt);           loadmoreBtn.show();           if(nextPage){             loadmoreBtn.attr('href', nextPage).text('Load More');           }else{             loadmoreBtn.addClass('no-more').text('All Posts Loaded!').removeAttr('href');           }         }      });   }});//]></script>

Jika sudah, jangan lupa klik Simpan Template.

Selesai…

Silahkan sobat buka blognya.

Bagaimana? Berhasil?

Jika masih bingung silahkan tanyakan saja dikolom komentar. Oke mungkin cukup sekian untuk tutorial kali ini. Terima Kasih.