Skip to main content

Cara Membuat Halaman Berikutnya tanpa Loading di Blogger

infinite scroll blogger

Jika Biasanya ketika pengunjung membuka halaman selanjutnya, terutama pada bagian homepage halaman blogger, browser akan reload atau refresh terlebih dahulu sebelum halaman yang di tuju terbuka. Nah pada kesempatan kali ini saya akan berbagi tutorial cara memuat halaman berikutnya pada blogger tidak loading.

Membuat Halaman berikutnya pada blogger tanpa loading dalam istilah blogger biasa di sebut dengan istilah Infinite Scroll Blogger. Nah jadi Infinite scroll ini bertujuan memuat halaman selanjutnya pada blogger tanpa ada proses reload atau loading terlebih dahulu.

Jadi dengan memasang infinite scroll di blogger akan membuat pengunjung betah menjelajah artikel teman-teman, karena untuk membuka halaman selanjutnya browser tidak akan reload.

Cara Membuat Halaman Selanjutnya Tanpa Reload (Infinite Scroll Blogger)


Pertama. pastikan blog sudah memasang librabry jQuery pada template. Jika memang belum ada simpan kode di bawah ini setelah kode <head>.

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


Kedua. Sebelumya hapus terlebih dahulu semua kode CSS selector. kode ini di beri tanda dengan #blog-pager. Silahkan teman-teman hapus semua CSS blog pager yang berada di dalam tag kondisionl isMultipleItems. Contohnya kaya di bawah ini.

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


Ganti semua kode blog pager tersebut dengan 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. Cari kode seperti berikut


<b:includable id='nextprev'>


jika tidak ketemu coba dengan kode di bawah ini. Jika ada banyak pilih kode tersebut yang berada di dalam widget Blog1.

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


Selanjutnya Hapus kode tersebut dan gantikan dengan kode di bawah ini.

<b:includable id='nextprev'>
  <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>


Keempat. Simpan script infinite scroll blogger berikut 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://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>


Perhatikan pada kode var auto yang saya tandai di atas. Silahkan teman-teman pilih salah satu true atau false. True artinya postingan selanjutnya akan di muat secara otomatis tanpa di klik jika halaman sudah sampai bawah. Sedangkan untuk False, postingan selanjutnya akan di muat ketika pengunjung mengklik pada tombol.

Perhatian


Dalam membuat halaman berikutnya tanpa Loading di Blogger, yang perlu diperhatikan adalah Jika di template teman-teman di lengkapi juga dengan script costum lain pada tombol navigasi seperti navigasi bernomor atau tombol navigasi dengan Judul postingan, maka lebih baik scriptnya di hapus terlebih dahulu agar tidak terjadi bentrok ataupun membuat beban loading lebih berat.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Jika postingan ini bermanfaat silahkan bagikan postingan ini ke teman kamu atau dengan mengklik tombol bagikan di atas. Berkomentar di blog ini gratis..!!!
Buka Komentar
Tutup Komentar