Menerapkan Infinite Scroll Sederhana Pada Blogger - Dewa Blogger

Halaman

    Social Items

Buy Now
Fitur ini merupakan pola positif penerapan dari kepingan aba-aba  Menerapkan Infinite Scroll Sederhana pada Blogger

Fitur ini merupakan pola positif penerapan dari kepingan aba-aba ini yang lalu diaplikasikan untuk menciptakan navigasi halaman AJAX tanpa jQuery menyerupai pada contoh sebelumnya.

Infinite scroll ialah teknik desain web yang mencegah kafetaria gulir peramban menggulir ke bab bawah halaman, menciptakan halaman tumbuh dengan konten suplemen sebagai gantinya.

Plugin ini mengharuskan Anda untuk memilih empat elemen sebagai sasaran JavaScript. Posting, wadah posting, wadah navigasi halaman dan tautan navigasi halaman berikutnya. Untuk Blogger, elemen sasaran yang paling umum sanggup dipakai ialah sebagai berikut:

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

Anda sanggup menyesuaikannya nanti menurut markup HTML pada templat Anda.

Plugin ini pada awalnya merupakan plugin untuk CMS Mecha, tapi sebetulnya ini tetap sanggup bekerja pada platform yang lain menyerupai Blogger, dengan sedikit pembiasaan tentunya.

Untuk menerapkannya pada Blogger, salin aba-aba di bawah ini lalu 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 */ 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.

Konfigurasi

Data Keterangan
type Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban hingga pada batas simpulan halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, sesudah itu pengguna hanya perlu menggulung peramban hingga pada batas simpulan halaman untuk memuat posting-posting sebelumnya.

Sumber https://www.dte.web.id/

Menerapkan Infinite Scroll Sederhana Pada Blogger

Fitur ini merupakan pola positif penerapan dari kepingan aba-aba  Menerapkan Infinite Scroll Sederhana pada Blogger

Fitur ini merupakan pola positif penerapan dari kepingan aba-aba ini yang lalu diaplikasikan untuk menciptakan navigasi halaman AJAX tanpa jQuery menyerupai pada contoh sebelumnya.

Infinite scroll ialah teknik desain web yang mencegah kafetaria gulir peramban menggulir ke bab bawah halaman, menciptakan halaman tumbuh dengan konten suplemen sebagai gantinya.

Plugin ini mengharuskan Anda untuk memilih empat elemen sebagai sasaran JavaScript. Posting, wadah posting, wadah navigasi halaman dan tautan navigasi halaman berikutnya. Untuk Blogger, elemen sasaran yang paling umum sanggup dipakai ialah sebagai berikut:

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

Anda sanggup menyesuaikannya nanti menurut markup HTML pada templat Anda.

Plugin ini pada awalnya merupakan plugin untuk CMS Mecha, tapi sebetulnya ini tetap sanggup bekerja pada platform yang lain menyerupai Blogger, dengan sedikit pembiasaan tentunya.

Untuk menerapkannya pada Blogger, salin aba-aba di bawah ini lalu 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 */ 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.

Konfigurasi

Data Keterangan
type Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban hingga pada batas simpulan halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, sesudah itu pengguna hanya perlu menggulung peramban hingga pada batas simpulan halaman untuk memuat posting-posting sebelumnya.

Sumber https://www.dte.web.id/