Cara Membuat Infinite Scroll Pada Template Median UI

Saifulah.id - Infinite Scroll (Gulir tak terbatas) adalah sebutan untuk navigasi halaman yang tidak membutuhkan tombol untuk memuat postingan berikutnya. Jadi setiap kali pengunjung mencapai batas akhir postingan, fitur infinite scoll ini akan loading otomatis agar konten dimuat terus menerus.

Jenis-Jenis Navigasi Halaman

Buat yang belum tahu, navigasi halaman itu terdiri dari 3 macam, diantanya:

1. Pagination

Pagination adalah navigasi halaman yang berupa banyak nomor atau angka. Sehingga pengunjung bisa melompat ke beberapa halaman lain yang mereka suka.

2. Load More

Load More adalah navigasi halaman yang berupa satu tombol saja.

3. Infinite Scroll

Infinite Scoll adalah navigasi halaman yang tidak memiliki tombol sama sekali, namun dilengkapi pendeteksi otomatis untuk memanjakan pengunjung melihat halaman selanjutnya tanpa berbuat apa-apa.

Kelebihan Infinite Scrolling

Infinity Scolling memiliki banyak kelebihan yang tidak dimiliki oleh navigasi jenis lain. Tapi di sini saya akan sebutkan 3 kelebihan saja agar tidak terlalu panjang pembahasannya.

1. Pengunjung adalah Raja

Pengunjung blog adalah tamu kehormatan yang harus dilayani dengan baik. Tugas infinite scroll di sini ibarat seorang pelayanan yang berinisiatif selalu menyuguhkan artikel menarik yang mungkin disukai oleh para tamunya. Jadi, infinite scrolling meminimalisir tugas pengunjung dalam menekan tombol.

2. Memberikan Eksposur Konten Yang Lebih Baik

Dalam sosial media, periklanan, dan bisnis, kita mengenal istilah exposure dan impression. Kedua hal ini sangat penting untuk meningkatkan jumlah klik postingan. Makanya Instagram, Facebook, Twitter, dan Pinterest selalu menggunakan teknik infinite scrolling dalam setiap aplikasinya.

Selain membuat pengguna tidak capek menekan tombol, pengguna juga bisa dibuat ketagihan dengan konten yang tampil terus menerus apalagi ada yang mereka sukai.

Berbeda jika kita pakai navigasi tombol, mata pengunjung hanya akan melihat konten teratas saja. Mereka baru akan melihat konten lain jika mau menekan tombol selanjutnya.

3. Penelusuran Halaman Cepat

Tidak diragunakan lagi, penelusuran menggunakan infinite scroll lebih cepat dibanding yang lain. Hal ini tentu menghemat waktu dan tenaga viewer saat berada di halaman.

Tutorial Membuat Infinite Scrolling Median UI

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
   
   

   
   
5. Cari kode InfiniteScroll ({ type: 0
   
6. Ubah angka 0 jadi 1 atau 2

Keterangan:

• type: 0 berarti pengguna perlu mengeklik tombol untuk memuat postingan lain.
• type: 1 berarti pengguna hanya perlu menggulir (scroll) halaman sampai pada batas akhir halaman untuk memuat posting lainnya.
• type: 2 berarti pengguna perlu mengeklik tombol sekali untuk memuat postingan berikutnya, setelah itu pengguna hanya perlu mengusap layar ke bawah (scroll) halaman untuk merefresh halaman selanjutnya.

Dengan kata lain, type: 0 adalah jenis navigasi Load More yang dipakai oleh Median UI secara bawaan. Sedangkan untuk mengubahnya menjadi Infinite Scroll tinggal diubah menjadi type: 1.

Tapi jika kita ingin menggabung antara navigasi Load More dengan Infinite Scroll, kita bisa menggunakan type: 2. Demonya bisa kalian lihat di sini

Demikian tutorial cara membuat infinity scroll yang ditanyakan oleh kak Rizka 14 hari yang lalu. Semoga bermanfaat buat semua pembaca.