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
Short URL:

2 comments - Cara Membuat Infinite Scroll (Load More) Blogger

  1. punya saya load kok malah gak ada gambarnya ya gan, ada solusinya ndak

    ReplyDelete
    Replies
    1. mungkin pemasangannya belum benar, saya terapkan di beberapa template blog saya bisa bisa aja

      Delete

1. Berikan Komentar yang Relevan
2. Tidak Mengandung SARA
3. Berkomentar yang Sopan