Sudah lumayan lama saya tertarik untuk membuat halaman muka atau homepage blog ini memiliki fitur infinite scroll, atau bisa bergulir ke bawah tanpa harus menekan taut nextpage atau load more. Adalah kegagalan yang berkali-kali ketika memasang script-nya yang membuat keinginan itu kandas di pengkolan jalan.
Ada sejumlah script yang bisa melakukan fungsi itu, namun kadang-kadang tak bekerja, alias tak bergulir secara otomatis ketika telah sampai di ujung bawah laman. Tentu ini tidak bisa digunakan, oleh karena sebuah script harus bisa secara konsisten menjalankan fungsi yang ditugaskan untuknya.
Sebenarnya cukup banyak blog yang telah menulis tentang bagaimana cara membuat Infinite Scroll di Blogger, namun ketika diikuti langkah-langkahnya ternyata script-nya tidak berfungsi. Mungkin karena kebanyakan blog yang membuat tutorialnya ternyata tidak menggunakan infinite scroll, jadi besar kemungkinannya mereka tidak mencobanya sendiri.
Pro Kontra
Memang ada semacam pro kontra tentang untung rugi menggunakan infinite scroll, baik di Blogger maupun di WordPress. Kontranya adalah pengunjung tidak memiliki kendali terhadap laman, karena laman akan bergulir otomatis, namun argumen ini mudah dipatahkan. Jika tak mau bergulir otomatis ya tinggal tak usah melanjutkan scroll. Sesederhana itu.Keberatan lainnya adalah bahwa keberadaan footer itu penting, oleh karena umumnya berisi taut yang sangat dibutuhkan para pengunjung, seperti kontak, tentang blog, dan info penting lainnya. Namun ini bisa diatasi dengan membuat Sitemap yang berisi semua informasi penting serta ada taut back to top, dan menampilkan footer di Post dan Page, bukan di homepage.
Pro-nya adalah dengan memasang infinite scroll maka pengunjung tak perlu repot mengklik nextpage atau load more karena laman bergulir otomatis ketika sudah menyentuh dasar halaman. Cara ini pun meringankan kerja server, sehingga secara keseluruhan akan membantu memberi pengalaman kunjungan yang lebih baik.
Blogger Infinite Scroll
Jika sudah yakin hendak menggunakan script infinite scroll pada Blogger, ikut langkah-langkah di bawah ini. Ada baiknya dilakukan terlebih dahulu di Test Blog. Jika sudah yakin berhasil dan konsisten kinerjanya, baru dibuat di blog utama Anda. Script-nya berasal dari laman di www.igniel.com dengan sedikit modifikasi pada kembangannya.- Login ke Blogger, klik Theme, klik titik tiga tumpuk, klik Edit HTML. Back up seluruh HTML Anda, dengan sorot seluruh kode, salin dan tempel ke Notes untuk digunakan nanti jika perlu.
- Bila belum menggunakan jQuery, salin dan letakkan script di bawah ini tepat sebelum </head>.
<b:if cond='data:view.isMultipleItems'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/></b:if>
Perhatikan: JANGAN menambahkan async='async' pada script di atas, karena ifinite scroll tidak akan bekerja. - Cari <footer>,
dan ganti menjadi
<footer><b:if cond='!data:view.isMultipleItems'>
Cari </footer>,
dan ganti menjadi
</b:if></footer>
Dua langkah di atas adalah untuk meniadakan isi footer untuk di homepage, dimana info penting ditampilkan, dan hanya akan muncul di laman Post dan Page. - Di bagian CSS Anda, kumpulkan semua css blog-pager yang ada saat ini di kondisional tag berikut, agar hanya dipakai untuk Post dan Page.
<b:if cond='!data:view.isMultipleItems'>
[letakkan semua css #blog-pager Anda]
</b:if>
Tepat di bawahnya tempel css berikut ini:<b:if cond='data:view.isMultipleItems'>
#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}</b:if> - Cari <b:includable id='nextprev'>
Agar kode blog-pager yang sekarang masih tetap bisa berfungsi untuk post dan page, letakkan seluruh kodenya di dalam kondisional tag <b:if cond='!data:view.isMultipleItems'>, dan tambahkan kode nextprev untuk infinite scroll, sehingga menjadi
<b:includable id='nextprev'>
<b:if cond='!data:view.isMultipleItems'>
[seluruh isi nextprev Anda yang sekarang]
</b:if>
<b:if cond='data:view.isMultipleItems'> <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:if>
</b:includable>
- Salin dan tempelkan script berikut ini tepat sebelum </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/AVvXsEjp9dpglAQQQ_NYiDQzg3E6b0eHxkTCQCNjCY4q_ddpnf1FtBeIdoBDIfCdnPleYujHgkVKVF8a30p68VmmZnm_0BSjmWVT3hgYFVHHVDRrAmSLH2XFfCb3MOrxMkDjU2_iCjhLmIw37EzE/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> - Save, selesai.
Label: Blogger, Inspirasi, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
