Cara Membuat Infinite Scroll (Load More) Blogger

Apa itu Infinite Scroll atau sering juga disebut oleh orang lain sebagai auto load more. Jadi infinite scroll itu mirip seperti page number tapi disini page numbernya tidak memiliki nomor (gimana maksudnya wkwk -_-)

Jadi gini, biasanya kan kalau page number pada template blogger itu kan ada nomer 1, 2, 3 atau ada juga yang previous / next dan ketika di klik maka kita akan meloading halaman. Nah kalau kita menggunakan script auto load more ini maka kita ngga perlu melakukan pindah halaman. Dalam artian kita ngga harus nge refres halaman.

Ketika melakukan klik kita akan tetap berada di page yang sama dan post yang kita load pun tetap terload. Auto Load More ini merupakan contoh penerapan Ajax pada blogger.

Tutorial membuat Auto Load More

Pertama buka Editor Html pada blog kalian.

Selanjutnya silakan copy code dibawah ini

<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='https://rawgit.com/danilrafiqi/assets/master/javascript/autoload.js'></script>
<script>
//<![CDATA[
var infinite_scroll = new InfiniteScroll({
    type: 2,
    target: {
        posts: '.blog-posts',
        post: '.date-outer',
        anchors: '.blog-pager',
        anchor: '.blog-pager-older-link'
    },
    text: {
        load: '<a class="js-load" href="javascript:;">Muat Lagi</a>',
        loading: '<span class="js-loading" style="cursor:wait;">Memuat\u2026</span>',
        loaded: '<span class="js-loaded">Dimuat.</span>',
        error: '<a class="js-error" href="javascript:;">Kesalahan.</a>'
    }
});
//]]>
</script>
</b:if>
Letakkan kode auto load more sebelum kode </body>

Setelah itu simpan.

Silakan dilihat blog agan apakah penerapan auto load more nya berhasil atau tidak. 

Script auto load more ini sudah saya terapkan di template blog premium yang sedang saya buat dan work.

Baca juga post saya yang sebelumnya yaitu cara membuat semua link terbuka open new tab dan Cara memasang Anti Klik kanan.

Sekian post kali ini semoga bermanfaat.

Thanks to DTE

Subscribe to receive free email updates: