Cara Membuat Load More Saat Di Scroll Dengan Menggunakan "Infinite Scroll" di Blogger

Infinite scroll merupakan sebuah fitur yang berfungsi memuat halaman selanjutnya pada blog secara otomatis saat kita melakukan scrolling.

Fitur ini tentunya sangat membantu pengunjung karena fitur ini mengurangi kontak pengunjung dengan tombol "next".

Untuk blogger sendiri agar bisa menggunakan fitur ini diperlukan plugin tambahan berupa javascrit. Ada banyak javascript semacam ini di luar sana. Namun pada tutorial ini saya akan mengunakan javascript dari desandro.

Sebelum mempraktekkan tutorial ini silahkan backup dulu template kalian jangan sampai terjadi hal-hal yang tidak diinginkan :)

Cara Menambahkan "Infinite Scroll"

Step 1

Copy kode di bawah ini tepat di atas kode </body>

<b:if cond='data:view.isMultipleItems'>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"/>
<script>
var elem = document.querySelector('.blog-posts');
var infScroll = new InfiniteScroll( elem, {
  // options
  path: '.blog-pager-older-link',
  append: '.date-outer',
  history: false,
  hideNav: '.blog-pager',
  status: '.scroller-status',
});
</script>
</b:if>

Step 2

Cari kode <b:include name='nextprev'/> lalu paste tepat di bawahnya kode dibawah ini

<div class="scroller-status">
  <div class="infinite-scroll-request loader-ellips">
  <span class="loader-ellips__dot"></span>
  <span class="loader-ellips__dot"></span>
  <span class="loader-ellips__dot"></span>
  <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

Step 3

Copy dan paste kode di bawah tepat di atas kode ]]></b:skin>

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

Konfigurasi

Kode script di atas menyesuaikan dengan kode bawaan/default blogger. Jika template kalian adalah template kustom maka bisa saja pengenal elemennya berbeda, jadi mungkin saja kalian tidak akan mendapati kode bawaan sepert "blog-pager-older-link","date-outer" dan sebagainya.

Dukungan browser

Infinite Scroll v3 sudah bisa diterapkan pada browser IE/Edge 11, Android 4+, Safari for iOS 8+, Firefox 29+, and Chrome 33+. 

Keuntungan menggunakan fitur infinite-scroll

1. Pengunjung tidak perlu repat menekan tombol next
2. Blog tampak profesional
3. Tidak memerlukan jquery

Kekurangan menggunakan fitur infinite-scroll

Selain ada kekuntungan menggunakan fitur ini, ada juga beberapa kekurangannya.

1. Menggunakan javascript eksternal

Jika kalian menemui kendala saat melakukan pemasangan plugin infinite scroll ini silahkan tinggalkan komentar di bawah.