Pada Bahasan Kali Ini Saya Akan Membahas Tentang Penerapan Fitur Infinite Scroll Pada Blogger,Sebenarnya Postingan Ini sudah pernah di bahas di salah satu blog,pada tahun 2016,Saya hanya memugar ulang agar Sesuai dengan Jaman.
Fitur Infinite Scroll
Saya Akan Singgung Sedikit Mengenai Fitur Ini :
Fitur ini merupakan contoh nyata penerapan dari potongan kode ini yang kemudian diaplikasikan untuk membuat navigasi halaman AJAX tanpa jQuery seperti pada contoh sebelumnya.Sumber : http://www.dte.web.id/2016/07/blogger-infinite-scroll.html
Infinite scroll adalah teknik desain web yang mencegah bar gulir peramban menggulir ke bagian bawah halaman, membuat halaman tumbuh dengan konten tambahan sebagai gantinya.
Plug in Ini Mengharuskan Anda Menentukan 4 Element Sebagai Target Javascript ,Posting,Wadah Posting ,Wadah Navigasi dan Halaman Selanjutnya Yang Umum di gunakan Untuk Blogger ,Elemen Target Yang paling umum digunakan SBB :
- .blog-posts
- .date-outer
- .blog-pager
- .blog-pager-order-link
Plugin Ini awalnya Hanya Untuk CMS Mecha Tapi Dapat bekerja juga Di Platform Blogger Dengan Penyesuaian Terlebih dahulu Tentunya
Untuk menyesuaikanya dengan Blogger Bisa Salin Code Di Bawah dan letakan di </body> :
<b:if cond='data:blog.pageType in [quot;index","archive"]'>
<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 On DTE*/
var infinite_scroll = new InfiniteScroll({
type: 2,
target :{
posts: '.blog-posts',
post: 'date-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-order-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>
Test
ReplyDelete