Cara Membuat Load More Memuat Halaman Tanpa Reload (Infinity Scroll)

Biasanya jika membuka halaman lain di blog milik orang seperti punya radiokonoha.com atau blogcepot.com khususnya pengguna blogger maka saat halaman di muat akan melakukan mereload atau merefresh halaman terlebih dahulu sebelum pergi ke halaman yang dituju. Script yang saya bagikan ini memiliki ilustrasi (saat pengunjung membuka halaman home Pada blog anda, setelah mengecek late post, dan di bawahnya ada tombol halaman berikutnya, saat di klik akan membuka isi artikel yang tersembunyi tanpa mereload atau berpindah halaman baru).

Gambar tombol load more tanpa berpindah halaman.

Perlu di ketahui, untuk infinity scroll sendiri itu ada dua jenis yang perlu kamu ketahui berdasarkan event yang beda.

1. Yang pertama ada jenis auto load on scroll yang merupakan yang halaman ya di muat otomatis sampai batas akhir artikel. Sehingga gak perlu menekan tombol load more maka konten baru otomatis dimuat / muncul sampai yang terakhir.

2. Yang ke dua auto load on click, jadi pengunjung harus menekan tombol load more untuk menampilkan konten.

Infinity scroll aka langsung memuat konten secara otomatis ketika pengunjung membuka blog anda berdasarkan event yang anda terapkan.

Cara Membuat Infinity Scroll Blog Tanpa Reload Halaman

1. Langkah pertama anda harus memastikan blogger anda terdapat query seperti di bawah. Jika belum anda bisa memasangnya di atas </head>.

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

2. Kemudian Cari kode CSS yang biasa di beri nama #blog-pger. Jika kodenya ada banyak hapus kode yang didalam bagian tag conditional.


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

Lalu ganti dengan


/* 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
}

3. Langkah berikutnya kamu cari kode seperti ini.

<b:includable id='nextprev'>

Jika gak ketemu cari kode seperti ini.

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

Lalu hapus semua kodenya dan kamu ganti dengan kode ini untuk menampilkan infinity scroll load more di blogger kamu.


<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>

4. Langkah selanjutnya pasang kode javascript infinity scroll load more ini di atas kode </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/AVvXsEjHg_D_D1-AMACgEy0tx6kiYjuNdj91PjQbPrpfPtwXpN6vNOqfdUq6weP3FHzwe1lrYcAgCQftS6YpANIDFsm1MujCvNjAshQKooh0Im4uQaneLfH8TO9XcLqD-hI2G8Q4KNg3k8B_HcIe/s0/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>

Keterangan:

Var Auto:kode ini untuk membuat infinity scroll mau otomatis Menampilkan konten saat di klik atau harus klik manual tombol load more untuk menampilkan konten.anda hanya cukup menjadikan true jika ingin postingan menampilkan konten berikutnya tanpa klik load more, dan false untuk menampilkan konten secara manual.

Var IMG ini adalah untuk menampilkan gambar yang ingin di tampilkan saat konten sedang di muat.

Lalu simpan pengaturan template nya dan lihat hasilnya langsung. Infinity scroll load more tanpa refresh halaman ini di tampilkan di homepage, halaman pencarian, halaman arsip.

Download

Oke jadi itulah CARA MEMBUAT INFINITY SCROLL atau TOMBOL LOAD MORE untuk menampilkan KONTEN DI BLOGGER. Semoga artikel ini bermanfaat bagi anda.

Rate This Article

Thanks for reading: Cara Membuat Load More Memuat Halaman Tanpa Reload (Infinity Scroll), Sorry, my English is bad:)

RaKon Template

RaKon Template

Cara Membuat Load More Memuat Halaman Tanpa Reload (Infinity Scroll)

Cara Membuat Infinity Scroll Blog Tanpa Reload Halaman

Posting Komentar

Generate Link