Blogger Infinite Scroll

July 03, 2020. Blog, Blogger, Blogging, Tips. Bagikan: Facebook, Twitter, WhatsApp
aroengBinang.com - Posting kali ini hendak berbagi tentang script Blogger Infinite Scroll atau tips tentang cara membuat infinite scroll pada Blogger blog. Jika sedang mempertimbangkan cara memasang infinite scroll pada Blogger ketimbang memakai paginasi klasik, maka tulisan ini adalah yang sedang Anda cari.

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.

cara membuat Infinite Scroll pada Blogger

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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>
  5. 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

  6. 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://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>
  7. Save, selesai.
Silahkan diuji dengan membuka Homepage Anda dan lalu scroll hingga sampai ke bawah. Jika script Infinite Scroll untuk Blogger ini tidak bekerja, maka Anda mungkin perlu membuang semua widget yang ada di bagian bawah laman. Selamat mencoba dan semoga berhasil. Terima kasih untuk www.igniel.com.
, Pejalan musiman. Bagikan: Facebook, Twitter, WhatsApp, Telegram, Email. Print! Follow aroengBinang! aroengBinang.com adalah blog tulisan foto perjalanan dan catatan seputar wisata Indonesia, peta wisata, hotel, seni budaya, opini, percik pikir, hiburan, serta tips blogger. Kunjungi sitemap untuk mesin pencarian dan isi blog selengkapnya. Balik ke atas ↑