Menerapkan Infinite Scroll Sederhana pada Blogger

Fitur ini merupakan contoh nyata penerapan dari potongan kode ini yang kemudian diaplikasikan untuk membuat navigasi halaman AJAX tanpa jQuery.
Infinite scroll adalah teknik desain web yang mencegah bar gulir peramban menggulir ke bagian bawah halaman, membuat halaman tumbuh dengan konten tambahan sebagai gantinya.
Plugin ini mengharuskan Anda untuk menentukan empat elemen sebagai target JavaScript. Posting, wadah posting, wadah navigasi halaman dan tautan navigasi halaman berikutnya. Untuk Blogger, elemen target yang paling umum dapat digunakan adalah sebagai berikut:

• .blog-posts
• .date-outer
• .blog-pager
• .blog-pager-older-link

Anda dapat menyesuaikannya nanti berdasarkan markup HTML pada templat Anda.
Plugin ini pada awalnya merupakan plugin untuk CMS Mecha, tapi sebenarnya ini tetap dapat bekerja pada platform yang lain seperti Blogger, dengan sedikit penyesuaian tentunya.
Untuk menerapkannya pada Blogger, salin kode di bawah ini kemudian letakkan di atas </body>:

 
<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='//cdn.rawgit.com/tovic/infinite-scroll-plugin-for-mecha-cms/v1.1.0/infinite-scroll/assets/sword/infinite-scroll.min.js'></script>
<script>
//<![CDATA[
/*! Simple AJAX infinite scroll by Taufik Nurrohman <http://latitudu.com> */
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> 

Simpan perubahan.

Semoga Bermanfaat

Tweet