Cara Memasang Load More/Infinite Scroll Di Template VioMagz

Blog Buttatoa | Memasang Load More/Infinitife Scroll - Dalam suatu design website, ada 3 metode yang sering digunakan dalam mengatur navigasi halaman konten yaitu : "Pagination", Infinite Scroll" dan “Load More”. Setiap metode memiliki kelebihan dan kekurangan yang membuatnya cocok untuk kasus penggunaan dan jenis konten tertentu.

Misalnya, penggunaan paginasi bernomor oleh Google membuatnya lebih mudah untuk menemukan kembali hasil tertentu, sementara Twitter, Facebook, dan Instagram menggunakan pengguliran tak terbatas (infinitife scroll) untuk membuat pengguna terpaku pada layar mereka.

{tocify} $title={Table of Contents}

Dalam membuat pilihan tentang cara menampilkan hasil penelusuran, kalian dapat memutuskan berapa banyak konten yang akan ditampilkan kepada pengunjung pada satu waktu, tindakan apa yang harus mereka ambil untuk melihat lebih banyak, dan seberapa mudah menemukan kembali hasil tertentu yang mereka cari.

Apa Itu Paginations?

Pagination atau dalam bahasa Indonesia berarti "penomoran halaman/navigasi halaman", adalah proses memisahkan konten baik pada media cetak ataupun media digital menjadi halaman terpisah yang mengacu pada proses otomatis penambahan nomor berurutan untuk mengidentifikasi urutan halaman yang saling terhubung dan memiliki konten yang serupa.

Pada media cetak, pagination digunakan untuk membagi dokumen menjadi halaman-halaman, biasanya untuk penomoran. Istilah ini juga dapat merujuk pada proses fisik pembuatan halaman individual dengan tangan atau dengan mesin.

Di media digital, paginasi melibatkan pembagian konten menjadi halaman terpisah, biasanya untuk navigasi. Misalnya, sebuah blog mungkin menggunakan pagination untuk membagi postingannya menjadi beberapa halaman terpisah, masing-masing dengan jumlah entri yang terbatas. Aplikasi web juga menggunakan paginasi untuk membagi daftar hasil menjadi bagian-bagian yang dapat dikelola.

Ada 2 (dua) macam pagination yang sering disgunakan yaitu pagination bernomor dan pagination next-previous. Pagination next-previous (older/newer) digunakan sebagai navigasi devault blogger. Beberapa template pihak ketiga seperti VioMagz, pembuatnya telah menambahkan Pagination Bernomor.

Manfaat Pagination

Bila kalian mengamati lebih seksama, kalian akan cenderung menemukan bahwa artikel yang memiliki panjang 1.500 karekter kata akan menghasilkan lebih besar traffic dan pendapatan dari iklan. Hal ini dikarenakan:

Google dan search engines lainnya memiliki lebih banyak konten untuk dirayapi, sehingga memungkinkan mereka memahami lebih spesifik tentang konten tersebut;
Konten yang lebih panjang cenderung lebih informatif daripada konten yang lebih pendek. Jika pengguna yang mengunjungi website tersebut dan membaca konten lebih lama, maka akan meningkatkan SEO artikel tersebut.

Meskipun ada beberapa manfaat besar yang bisa didapatkan dari konten yang lebih panjang, namun hal tersebut juga memiliki beberapa kekurangan. Konten yang lebih panjang dapat membuat pengunjung malas dan bosan disebabkan terlalu lama waktu untuk membacanya.

Ada beberapa alasan mengapa pagination sangat penting dalam beberapa kasus/segi:

Pengalaman Pengguna
Dari segi user experience atau pengalaman pengguna, penggunaan pagination akan memaksa pengunjung untuk mengklik hingga beberapa kali untuk menuju konten yang sesuai. Hal tersebut tntu saja akan menambahkan total waktu yang ia perlukan untuk mengambil semua informasi yang diperlukan (walaupun setiap halaman akan dimuat dengan cepat).
Selain itu penggunaan pagination membuat pengunjung yang telah mencapai akhir halaman konten atau telah melihat beberapa item dalam kategori tertentu, secara intuitif ingin melihat lebih banyak hasil yang ada. Hal ini membuat pengunjung dapat memutuskan berapa banyak lagi halaman yang ingin mereka lihat agar mereka mendapatkan gambaran tentang seberapa besar konte tersebut berguna buat mereka.
Tampilan Halaman
Karena konten dibagi menjadi beberapa halaman (2+), untuk membaca artikel lengkap, pengunjung harus membuka setiap halaman web yang diberi halaman. Hal ini berarti bahwa untuk setiap kunjungan, jumlah tampilan halaman per kunjungan meningkat secara dramatis dengan pagination, sehingga menghasilkan statistik lalu lintas website yang lebih baik.
Konten Dimonetisasi
Biasanya website yang menghasilkan uang melalui iklan menempelkan iklan di bagian atas, bawah, tengah dan samping konten. Penggunaan pagination memaksa pengunjung web untuk melihat halaman kedua, ketiga dan seterusnya untuk melanjutkan membaca konten. Hal ini berarti bahwa pengunjung web akan memiliki kemungkinan kedua/ketiga dst. untuk mengklik iklan.
Pemilihan Konten Yang Diinginkan
Biasanya halaman pagination dibagi berdasarkan judul, label, ataupun kategori konten. Pengunjung web dapat dengan mudah memilih setiap konten yang di cari atau diminati yang tersedia dalam kelompok judul, label, ataupun kategori tersebut.

Apa Itu Infinitife Scroll?

Infinitife Scroll adalah teknik desain web yang memungkinkan aliran konten tanpa batas kepada pengguna yang berguna untuk menampilkan lebih banyak konten segera setelah pengguna mulai mencapai akhir halaman.

Manfaat Infinitife Scroll

Ada beberapa alasan untuk menggunakan Infinite Scroll:

Jenis navigasi konten ini kondusif untuk pengguliran tanpa akhir. Oleh karena itu, ini berkontribusi pada keterlibatan yang lebih lama karena tidak ada gangguan, seperti mengklik tautan untuk melihat halaman berikutnya, selama konsumsi konten.
Infinite scroll memungkinkan kesempatan untuk menayangkan iklan tanpa akhir. Oleh karena itu, infinite scroll memberikan kesempatan untuk mengumpulkan lebih banyak tayangan saat pengguna terus menggulir.
Ketika pengguna tetap terlibat untuk waktu yang lama, misalnya, men-scroll, semakin banyak tayangan iklan yang ditayangkan berkorelasi dengan peningkatan pendapatan per sesi .
Dengan menggunakan gaya navigasi ini, kalian dapat memindahkan konten lama dari belakang ke depan agar lebih banyak tampilan. Ini disebut sebagai penemuan konten, yang sangat bermanfaat jika kalian memiliki konten abadi yang tidak hanya menambah nilai pengalaman pengguna tetapi membuka jalan untuk lalu lintas yang lebih konsisten.

Kelemahan Infinitife Scroll

Ada juga beberapa alasan untuk tidak menggunakan Infinite Scroll:

Pemuatan streaming terjadi lebih awal, akan selalu ada beberapa iklan yang berada di bagian bawah akan tetap tidak terlihat kecuali kalian memastikannya hanya dimuat saat memiliki kemungkinan tertinggi untuk dilihat.
Saat viewability kalian menurun, CPM juga akan berkurang.
Hanya ada dua arah yang dapat digulir pengguna yaitu "ke atas dan ke bawah", yang berarti mereka tidak akan pernah "mencapai bagian bawah" dan mundur, sehingga untuk menemukan konten tertentu menjadi merepotkan, membuat navigasi menjadi tidak efisien.
Google hanya akan meng-crawl konten dalam area pandang yang dapat diakomodasinya. Semua jenis konten memiliki batas viewport tertentu, yang berarti tidak semua konten kalian akan dirayapi yang menyebabkan kerumitan SEO .

Apa Itu Load More Button?

Load more button adalah pendekatan navigasi terbaik yang menggabungkan kedua jenis pengaturan navigasi yang dibahas sebelumnya diatas. Dengan menggunakan load more, konten tidak akan lanjut tampil secara otomatis atau dengan kata lain, konten dimuat saat pengguna/pengunjung sendiri yang memintanya.

Tombol load more menawarkan jalan tengah antara infinitife scroll dan pagination clasic. Opsi ini terdiri dari tombol di bagian bawah halaman yang akan menampilkan lebih banyak konten saat diklik, dan memberi pengunjung web mengambil keputusan sederhana untuk melihat lebih banyak hasil konten lainnya atau cukup mencapai akhir halaman saja.

Load more adalah desain sederhana yang tidak membebani pengguna karena harus bernavigasi melintasi serangkaian halaman, tetapi seakan bertanya kepada pengguna/pengunjung : "Apakah kalian ingin melihat lebih banyak hasil?". Karena memuat konten berikutnya memerlukan pilihan dan klik aktif, maka pengguna lebih dapat mengontrol penjelajahan mereka.

Manfaat Load More Button

Ada beberapa alasan untuk memilih menggunakan load more button:

Load more membuat halaman lebih ringan karena ada lebih sedikit sumber daya untuk dimuat sekaligus, karena pengguna harus mengklik tombol secara fisik untuk memuat lebih banyak sumber daya, kecepatan halaman ditingkatkan.
Load more memberi pengguna pilihan dan kendali atas berapa banyak konten yang dimuat, yang membuat mereka tidak tersesat di halaman.
Load more memberikan kesempatan kepada penayang untuk menampilkan iklan lebih banyak. Meskipun konten pada halaman tersebut tidak membuat pengguna ingin terlibat, iklan masih memiliki peluang lebih besar untuk dilihat.
Load more tidak merender sumber daya dari konten yang tersisa hingga pengguna mengklik tombol, yang berkontribusi pada keterlihatan yang lebih baik karena viewport tidak mencapai kapasitas.

Kelemahan Load More Button

Ada juga beberapa kerugian memilih menggunakan load more button:

Load more akan selalu memberikan lebih sedikit tayangan karena iklan yang ditampilkan dengan konten yang tersisa bergantung pada tindakan pengguna.
Load more cenderung bertindak sebagai titik gesekan karena ada persyaratan untuk mengklik tombol untuk mengakses konten lainnya, yang dapat menghentikan pengguna untuk bergerak maju.
Google tidak akan selalu merayapi konten yang berada di belakang tombol load more, yang dapat menyebabkan kerumitan SEO.

Menambahkan Load More/Infinite Scroll

Untuk manambahkan dan memasang fitur Load More ataupun Infinitife Scroll pada website kalian, ikuti langkah-langkah berikut:

1. Copy script CSS dibawah lalu pastekan atau letakkan diatas kode ]]></b:skin>

.js-load, .js-loaded{
  position: relative;
  display: inline-block;
  height: 36px;
  width:140px;
  line-height: 35px;
  padding: 0;
  border-radius: 20px;
  border: 1px solid #fe780278;
  box-shadow: 0 1px 3px #fe780278;
  background:#6a3c78;
  color:#ffffff;
  margin: 5px;
  transition: .5s;margin-top: 20px}
.js-load:hover{
  background-color: #925035}
a.js-load,a.js-loaded{color:#ffffff}
.js-loaded:after{
  width: 14px;
  height: 14px;
  margin-left: 10px;
  vertical-align: -2px;
  display: inline-block;
  animation: wansSpin .75s linear infinite normal;-webkit-animation: wansSpin .75s linear infinite normal;
  background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='yellow'/></svg>&quot;) center no-repeat;content: &#39;&#39;;}
@keyframes wansSpin {from {transform:rotate(0deg)}to {transform:rotate(360deg)}}@-webkit-keyframes wansSpin {from { -webkit-transform: rotate(0deg)} to { -webkit-transform:rotate(360deg)}}
.js-load span.circlejs{background-color: #0099cc;display: block;color: #fff;position: absolute;float: left;margin: 2px;height: 28px;width: 28px;top: 2px;left: 3px;transition: .5s;border-radius: 50%;background-position:center;background-repeat:no-repeat}

2. Copy Java Script dibawah dan pastekan diatas code </body>

<script>
<b:if cond='data:view.isMultipleItems'>
//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0,
target: {
posts: '.blog-posts',
post: '.post-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Load More</a>',
loading: '<a class="js-loaded">Please Wait...</a>',
loaded: '<a class="js-load" href="#" data-text="Loaded! Back To Top">Back To Top',
error: '<a class="js-load">Sorry Error!</a>'
}
});
//]]>
</b:if>
//<![CDATA[
Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"}),"undefined"!=typeof infinite_scroll&&infinite_scroll.on("load",function(){Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"})});var scroll=new SmoothScroll('a[href*="#"]',{speed:600,speedAsDuration:!0,easing:"easeInOutCubic"});
//]]>
</script>

Catatan Penting Untuk Diperhatikan:

Perhatikan kode yang berwarna biru "type: 0". Jika bernilai 0 (nol) maka akan berfungsi sebagai Load More. Untuk mengubahnya menjadi Infinitife Scroll, kalian ubah nilainya menjadi 1 (satu).
Untuk kode yang berwarna orange adalah kode tambahan untuk mengatasi tidak tampilnya gambar thumbnail pada template VioMagz v4.9.0 terbaru. Jika kalian menggunakan template lain, jika terdapat masalah dalam penggunaan java scriptnya, kalian hapus kode orange tersebut.
Untuk pengguna template VioMagz, untuk mengaktifkan fitur ini, kalian harus mengubah pengaturan kode template dibagian tata letak. Yang harus kalian ganti, yaitu "numberedPageNav:", dari true menjadi false. Saat numberedPageNav bernilai true, maka yang aktif adalah Pagination Number dan pada posisi nilai false maka yang aktif adalah Load More/Infinitife Scroll.

Kesimpulan

Tidak ada gaya navigasi halaman yang 100% sempurna. Penggunaan yang terbaik untuk website kalian akan bergantung pada beberapa faktor, termasuk:

Apakah pengguna/pengunjung kalian menjelajah atau menelusuri.
Infinitife Scroll melayani kebutuhan konten yang "kurang spesifik" sementara Load More Button lebih baik untuk pengguna yang mencari konten tertentu (spesifik)
Sasaran monetisasikalian
Load More Button akan meningkatkan keterlihatan dan CPM kalian sementara Infinitife Scroll akan meningkatkan tayangan iklan kalian.
Jenis konten di situs kalian.
Jika sasaran konten kalian diperuntuukkna untuk pengguna yang aktif melalui saluran media sosial, maka Infinitife Scroll adalah opsi yang lebih baik. Namun, jika kalian memiliki konten bentuk panjang atau halaman eCommerce, kalian sebaiknya menggunakan Load More Button.
Jenis pengalaman yang ingin kalian tawarkan.
Jika kalian melayani tipe yang lebih bebas perawatan dan santai, maka Infinite Scroll lebih cocok. Namun, jika kalian ingin kontrol berada di tangan pengguna, lanjutkan dan implementasikan Load More Button.

Taruhan terbaik kalian dalam memilih antara Infinitife Scroll dan Load More Button adalah menimbang pro dan kontra dari keduanya setelah menentukan faktor mana di atas yang berlaku. Semoga bermanfaat, Wassalam.