Cara membuat infinite scrol blogger tanpa reload

cara membuat infinite scroll tanpa reload di blogger

kali ini admin akan memberikan tutorial cara membuat infinite scrol blogger tanpa reload biasanya jika kita berkunjung disebuah blog maka kita akan menemukan tombol load more dan me refresh ke halaman yang akan dituju. nah script yang akan saya bagikan ini tanpa perlu me refresh halaman yang akan dituju. nah tutorialnya ini saya dapatkan di blog igniel.com

sebenarnya ada dua model infinite scroll yaitu :

Auto load on scroll : yaitu ketika kita scroll sampai batas akhir maka akan load sendiri.
Auto load on click : pengunjung perlu meng click tombol load more artikelnya

tapi pada kempatan kali ini admin hanya membahas auto load on scroll. ok langsung ke tutorial nya

cara membuat infinite scroll tanpa reload

Pertama pastikan sudah terpasang liblary jquery. jika belum terpasang pasang kode dibawah ini tepat di bawah<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

kedua hapus semua code css selector dari blog pager yang biasanya diberi nama #blog-pager. jika ada banyak sobat harus hapus css blog pager yang ada pada didalam tag kondisional multiple item IsMultipleItems contoh nya seperti kode css dibawah ini.


#blog-pager-older-link {...}
#blog-pager-older-link:hover {...}
a.blog-pager-older-link {...}
a.blog-pager-older-link:hover {...}

lalu ganti kode semuanya dengan kode css dibawah 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 dibawah ini


<b:includable id='nextprev'>

kalau tidak carilah kode ini. pasti ada banyak pilih kode yang berada diarea Blog1


<b:includable id='postPagination' var='post'>

lalu hapus semua dan ganti dengan kode dibawah ini


<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

load more adalah tulisan ditombol sobat bisa ganti sesukanya sobat bisa tusbol atau apalah

keempat simpan script jquery dibawah 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmP3SvAhD2spDAmyFonP55-XR-nBC9s6HFgC-IMOOEuAA3ib4Xy-IuehprtT0ZH5SfEYOcgmwFfp0sGSUigFmg3xdQjNQETifBvaY4w-X-652_sHrtA9RCxdMyPXQfa-ZVyjVuU6pHL21b/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>

Variable	Keterangan
Var	pengaturan untuk auto load atau tidak
Auto	true:postingan berikutnya muncul otomatis tanpa perlu klik saat halaman sudah sampai pada batas akhir. False : postingan berikutnya tidak muncul otomatis dan pengunjung perlu melakukan klik pada tombol terlebih dahulu
var image	URL dari gambary yang tampil ketika proses loading artikel

terakhir tinggal simpan template blognya dan selesai menurut admin sudah cukup cara membuat infinite scroll blogger tanpa reload halamannya jika ada pertanyaan silahkan di kolom komentar, smoga artikel ini membantu kita semua
https://www.igniel.com/2018/11/infinite-scroll-blogger.html