Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload

Cara Membuat Infinite Scroll Blogger Tanpa Reload

Biasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform Blogger (Blogspot), browser akan melakukan reload atau refresh terlebih dulu sebelum pergi ke halaman yang dituju. Script yang akan saya bagikan ini akan memuat halaman berikutnya dari Blogger tanpa perlu reload.

Ada dua jenis infinite scroll yang tersedia berdasarkan event yang dilakukan:
  1. Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll sampai batas akhir sehingga konten baru akan selalu muncul.
  2. Auto load on click. Pengunjung perlu melakukan klik pada tombol untuk memuat halaman berikutnya.

Infinite scroll akan otomatis memuat konten baru ketika pengunjung melakukan event yang ditentukan dan menempelkannya ke bagian terbawah menu navigasi halaman Blogger tanpa ada proses reload.

Cara Membuat Infinite Scroll Blogger Tanpa Reload

PERTAMA. Pastikan blog sudah terpasang library jQuery. Jika belum ada simpan kode berikut "DI BAWAH" <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

KEDUA. Hapus semua CSS selector dari blog pager yang biasanya diberi nama #blog-pager. Jika ada banyak, pastikan hapus CSS blog pager yang ada di dalam tag kondisional multiple items isMultipleItems. Contohnya seperti ini.
#blog-pager-older-link {...}
#blog-pager-older-link:hover {...}
a.blog-pager-older-link {...}
a.blog-pager-older-link:hover {...}

Lalu ganti semuanya dengan kode CSS ini.
/* Infinite Scroll Navigation */
#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {background:#008c5f; color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s}
#blog-pager-older-link a:hover {background:#ed4044}

KETIGA. Carilah kode ini.
<b:includable id='nextprev'>

Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>

Lalu hapus semua dan ganti dengan kode berikut.
<b:includable id='nextprev'> <!-- Jika tidak ada, carilah <b:includable id='postPagination' var='post'>. Ganti isinya sama seperti di bawah ini -->
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
          Load More
        </a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>
Load More adalah tulisan di tombol. Kamu bisa ganti sesukanya.

KEEMPAT. Simpan script dari infinite scroll Blogger ini "DI ATAS" </body>.
<b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
  // Infinite Scroll Blogger
  !function(ignielScroll) {
    var auto = true; // true atau false
    var img = 'https://4.bp.blogspot.com/-a8y2WkWKzU0/W90DTo4X29I/AAAAAAAAG2c/5FWxJt9VaYUM7Mz-bH0emW3A50lJxCltQCLcBGAs/s1600/igniel-loading.gif';
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('B a=["\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e","\\I\\t\\c\\d\\f\\i\\g\\d\\k\\l\\k","\\e\\b\\D\\d\\G\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\j\\b\\U\\b\\e\\i\\c\\h\\j\\w","\\y\\h\\j\\p","\\n\\c\\h\\n\\w","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w\\F\\m","\\r\\e\\b\\y","\\c\\b\\j\\f\\l\\r","\\I\\g\\d\\k\\l","\\s\\p\\h\\G\\u\\s\\C\\p\\h\\G\\u","\\r\\l\\D\\c","\\m\\g\\g\\b\\j\\p","\\n\\c\\d\\j\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w","\\f\\b\\l","\\s\\k\\g\\m\\j\\u\\s\\h\\D\\f\\F\\k\\e\\n\\P\\J","\\J\\C\\u\\s\\C\\k\\g\\m\\j\\u","\\e\\b\\g\\c\\m\\n\\b\\Y\\h\\l\\r","\\d\\j","\\k\\n\\e\\d\\c\\c\\F\\e\\b\\k\\h\\O\\b","\\k\\n\\e\\d\\c\\c\\N\\d\\g","\\r\\b\\h\\f\\r\\l","\\l\\d\\g","\\d\\y\\y\\k\\b\\l","\\l\\e\\h\\f\\f\\b\\e"];B q=o(a[0]),K=o(a[1]),z=L;q[a[4]](a[3])[a[2]](),q[a[19]](a[5],a[6],E(){1c o[a[15]](x[a[7]],{},E(A){B H=o(A)[a[4]](a[9])[a[8]]?o(A):o(a[10]);K[a[12]](H[a[4]](a[1])[a[11]]()),q[a[11]](H[a[4]](a[14])[a[13]]());z=L},a[11]),o(x)[a[18]](a[16]+Z+a[17]),!1});M(1a){$(1b)[a[19]](a[W],E(){M(!z&&($(x)[a[V]]()+$(x)[a[R]]())>=q[a[Q]]()[a[S]]){q[a[4]](a[6])[a[T]](a[5]);z=X}})}',62,75,'||||||||||_0x143a|x65|x6C|x6F|x72|x67|x70|x69|x2D|x6E|x73|x74|x61|x63|ignielScroll|x64|pager|x68|x3C|x62|x3E|x23|x6B|this|x66|loading|_0x5348x4|var|x2F|x6D|function|x20|x76|_0x5348x5|x2E|x22|post|false|if|x54|x7A|x3D|24|22|23|25|x77|21|20|true|x57|img|||||||||||auto|window|return'.split('|'),0,{}));
  }(jQuery);
  //]]> </script>
</b:if>

PENGATURAN
VariableKeterangan
var auto Pengaturan untuk auto load atau tidak.
true: Postingan berikutnya muncul otomatis tanpa perlu klik saat halaman sudah sampai batas akhir.
false: Postingan berikutnya tidak muncul otomatis dan pengunjung perlu melakukan klik pada tombol terlebih dulu.
var img URL dari gambar yang tampil ketika proses loading.

Terakhir simpan template dan lihatlah hasilnya. Infinite scroll tanpa refresh ini akan berdampak pada multiple items, yaitu halaman homepage, halaman arsip, halaman pencarian label, dan halaman pencarian berdasarkan query.

Tambahan

Kalau menu navigasi homepage di template kamu sudah dilengkapi dengan script custom lain seperti navigasi bernomor maka scriptnya wajib dihapus agar tidak terjadi bentrok.

Saya rasa sudah cukup detail karena pengaturannya memang tidak banyak. Kamu hanya perlu teliti mencari nama class dan id dari CSS dan HTML karena kode setiap template berbeda jadi banyak yang bingung menerapkannya. Tapi kalau sabar dan mau mencoba pasti sukses seperti demo berikut ini.

Baca Juga

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

21 Komentar

  1. Kalo auto load di postingan selanjut nya saat di scroll ke bawah sprti jalantikus itu gmna mbak

    ReplyDelete
    Replies
    1. Tutorial diperbarui. Cek lagi scriptnya. Udah bisa auto load saat scroll.

      Delete
    2. Tidak Work dengan sempurna mbak, memang muncul load more nya, tapi tidak auto load ,sudah saya praktek satu".

      Di bagian home masih muncul navigasi number + tidak load postingan sebelumnya dan di bagian post tidak auto load.

      Mungkin karena saya belum paham betul dengan coding, bisa di jelaskan dengan detail mbak.

      Coba praktekkan di template viomagz dan di beri demo mbak :D terima kasih.

      Delete
    3. DEMO: www.bjita.com
      Work dengan baik.

      Navigasi nomor? Blogger gak pake navigasi nomor. Kalau ada itunya berarti template tersebut dah dipasangin custom navigation. Hapus dulu script navigasi nomornya. Nanti scriptnya bentrok.

      Delete
  2. javascript nya jangan diobfuscator bisa mbak?
    soalnya target elemen javascript di template yang saya beda

    ReplyDelete
    Replies
    1. kalo versi dte punya saya begini mbak,
      "target: {
      posts: '.items',
      post: '.card',
      anchors: '.blog-pager',
      anchor: '.blog-pager-older-link'
      },"

      kalo di versi mbak bagian mana nya yang harus diganti?

      Delete
    2. Tutorial diperbarui. Silakan cek lagi langkah ketiga. JSnya beda jadi lebih baik ganti HTMLnya aja biar lebih mudah.

      Delete
  3. Niche post mastih,,tapi gak ngaruh untuk template Viomax,,CSS nya sangat rumit,,

    ReplyDelete
    Replies
    1. Nggak juga. Udah saya coba di template yang disebutkan dan work. Baca dan coba lagi pelan-pelan ya. Tinggal cari aja nama CSS yang sesuai dengan tutorial di atas dan ganti.

      Delete
    2. asal sabar dan mau ngertiin cssnya bisa kok :D

      Delete
    3. Sudah saya coba mbak sesuai dengan tutor, memang sudah muncul load more nya tapi gak mau load otomatis,,jadi harus di klik manual,,

      Delete
    4. oh iya,,apa ini hanya berlaku untuk homepage saja? atau halaman postingan?

      Delete
    5. Semua pertanyaan mas ada di postingan. Biasakan baca dulu sampai habis :)
      - Kalau mau otomatis atur dulu di scriptnya. Di tutorialnya dijelaskan.
      - Berlaku di halaman multiple items. Apa itu multiple items? Penjelasan ada di tutorialnya.

      Delete
    6. Ok saya coba lagi mbak,,terimakasih

      Delete
  4. ini to blogger yang aku kira cowok haha

    ReplyDelete
  5. kira-kira ngebratin loading blog ngga mbak kalau postnya muncul semua (auto load post)
    soalnya blog saya tentang mod-mod game..coba dilihat web saya mbak 18haulinindo.blogcepot.com

    ReplyDelete
    Replies
    1. Nggak memberatkan. Kalau loadnya udah banyak banget sampai puluhan kali pasti berat. Tapi jarang juga ada visitor yang load sampai puluhan kali.

      Pakai event onclick aja biar auto loadnya baru muncul kalau diklik.

      Delete
  6. oh iya satu lagi mbak... punya css atau script load page? soalnya blog saya kalo reload suka ngeblank dulu baru muncul postnya (ngga berat sih loadnya,tapi suka blank dulu kalo load)

    kalo punya mbak kan kelihatan wrapper postnya terlebih dahulu sebelum postnya ke load sempurna

    Thank you :)

    ReplyDelete
  7. di save,, jadi pengan ganti template setelah baca yang ini..
    bisa untuk yang amp ini atau tidak mbak

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>