Kode script yang akan aku bagikan ini akan memuat halaman berikutnya dari blogger tanpa perlu reload atau di refresh lagi. Jadi pengunjung gak perlu download-download lagi. Tapi sebelum itu, ada dua jenis infinite scroll yang tersedia berdasarkan event yang dilakukan:
- Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll sampai batas akhir sehingga konten baru akan selalu muncul.
- 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. Jika sudah paham, silahkan ikuti panduan pembuatannya dibawah ini :
Cara membuat infinite scroll blogger tanpa reload
#1. Buka blogger.
#2. Pilih menu tema > pilih edit html.
#3. Pastikan blog sudah terpasang library jQuery. Tapi, jika belum ada simpan kode berikut dibawah <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>
#4. 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 {...}
#5. 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}
#6. Kemudian carilah kode ini.
<b:includable id='nextprev'>
#7. Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>
#8. Lalu hapus semua dan ganti dengan kode berikut.Dengan tekan tombol ctrl + f > lalu cari <b:includable id='nextprev'> atau <b:includable id='postPagination' var='post'> ganti isinya 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. Sobat bisa ganti sesukanya.
#9. Simpan script dari infinite scroll blogger ini diatas </body>
#10. Selesai.
<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/AVvXsEiKgmOqnDHH0hCr_WJjkFg8FRPs6g6aMx3xFQufy_q0JuoNwvFJX1HAMid8m8DcMOz4X8n3rtTmWyYBrqCiVqylDQwtlGOWJvp7kTdYL8jcJ9t_6KQ40bXXQBf0MHX7MpKUkSRS4e_1lhdu/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=["vtcdfigmfbe","Itcdfigdklk","ebDdGb","vtcdfigmfbeijbUbeichjw","yhjp","nchnw","vtcdfigmfbeidcpbeichjwFm","reby","cbjflr","Igdkl","sphGusCphGu","rlDc","mggbjp","ncdjb","vtcdfigmfbeidcpbeichjw","fbl","skgmjushDfFkenPJ","JCusCkgmju","ebgcmnbYhlr","dj","knedccFebkhOb","knedccNdg","rbhfrl","ldg","dyykbl","lehffbe"];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
| Variable | Keterangan |
|---|---|
var auto |
Pengaturan untuk auto load atau tidak. true: Postingan berikutnya akan 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 yang dibuat.
Baca juga : cara membuat notifikasi blog keren yang membuat blogmu tambah keren.