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

35 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
    4. Work mbak, blum di hapus ternyata :D

      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. iya, kenapa di deobfus sih? :(

      Delete
    4. kakak cantik lain kali jangan di deobfus dong, kita juga mau belajar kakak cantik :( gak cuma bisa copy paste aja kak :(
      https://rawcdn.githack.com/galih977/Autoload-Navigaton/0ab4a8ff7b2fee8bd4fce5009e0529b9705ccb71/autoloadscriptkiddie.js

      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
  8. sudah saya pasang dan work tapi di saat mau "load more" malah ke redirect gambar tumbhnail blog yah mbak?

    coba tolong cek apanya yang salah mbak diblog saya 18haulinindo.blogspot.com

    ReplyDelete
    Replies
    1. Template yang dipake masih pake JS buat ambil thumbnail.

      Solusinya ngambil thumbnail harus pake kode Blogger aja.

      Cek disini:
      https://www.igniel.com/2018/08/membuat-resize-thumbnail-blogger-tanpa-script.html

      Delete
    2. oh ngaruh mbak... iyah template saya versi tahun 2015 skrng lagi saya design ulang salah satunya page navigationnya error yang lama jadi skrng mau saya rubah...

      Delete
  9. Mbak thumbnail script sudah saya ganti ngga pake script.. dan work tapi kok tampilannya jadi begini yah??

    ini gambarnya mbak

    https://3.bp.blogspot.com/-zZjoRMy1SI0/XAudTFWRjzI/AAAAAAAABl4/sFKBEDTDdmMfwHm3yBBbkgfKBInMsZ1XQCLcBGAs/s320/anehbinajaib.jpg

    tolong bantuannya mbak.. makasih :)

    ReplyDelete
    Replies
    1. Ada apa dengan tampilannya? Keliatannya thumbnail muncul.

      Delete
    2. Kalau saya tampilan imagenya pas di load malah ngeblur mba adakah solusinya?

      Delete
  10. Thanks Mbak,Work.Terimakasih Izin Share Ulang Boleh ??

    ReplyDelete
  11. Mba ketika sudah memuat ko gambarnya menjadi blur, adakah solusi nya, untuk gambar awal 2 setelah dimuat semuanya blur kecuali yang dua itu saja mba

    ReplyDelete
  12. thanks mbak sukses, saya senang hehe

    ReplyDelete
  13. Saya coba edit di template igniplex tapi sayang na gagal. setelah saya coba ganti dari beberapa kode di atas, tiba" postingan saya keredirect ke blog nya mba. :D Apa salah saya, :D

    ReplyDelete
  14. saya juga gagal di blog yang saya punya, kenapa yaa... malah post blognya jadi berantakan

    ReplyDelete

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