Cara Buat dan Pasang Infinite Scroll di Blogger Tanpa Reload - Mediaachmad

Pada umumnya saat membuka halaman page di blog, terutama yang berplatform Blogger atau Blogspot, Browser akan melakukan reload dan refresh terlebih dahulu untuk pergi ke halaman yang akan di tuju. Pada kesempatan ini script kita akan buat ini akan memuat halaman berikutnya tanpa perlu refresh ataupun reload.

Script ini di buat oleh mbak igniel (igniel.com), Namun akan saya perjelas lagi untuk pemasangan di template, terutama untuk di template Viomagz. Jadi simak terus tutorial dibawah ini.

Disini ada 2 versi event Infinite Scroll diantaranya:

1. Auto Load On Click. Visitor perlu melakukan klik pada tombol untuk memuat halaman selanjutnya.
2. Auto Load On Scroll. Halaman akan Otomatis termuat saat visitor ngescroll ke bawah sampai batas akhir jumlah postingan.

Infinity scroll ini akan secara otomatis memuat post terbaru saat visitor melakukan event yang di tetapkan dan kemudian akan menempelkannya dibagian bawah di menu Navigasi halaman blog dan tanpa Reload. Oke langsung saja simak tutorial berikut ini.

Cara Buat dan Pasang Infinite Scroll di Blogger Tanpa Reload

1. Pastikan website kalian sudah terpasang Jquery. Jika belum terpasang. Silakan letakkan kode dibawah ini diatas </head>

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

2. Simak baik baik dibawah ini.
• Untuk Template Viomagz.

Di tutorial mbak igniel kalian harus menghapus #blog-pager, Namun Untuk Template Viomagz Kalian TIDAK USAH kalian HAPUS.

Silakan kalian letakkan kode CSS dibawah, Letakkan di BAWAH kode </b:template-skin>

/* 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{max-width: 85px;position: relative;transition: 0.3s;font-size: 13px;padding: 10px 7px;margin: 2px 3px 2px 0;display: inline-block;border-radius: 30px;background: #ffffff;color: #535353;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);width: 100%;}
#blog-pager-older-link a:hover{color:#9e005c;background:#ffffff;box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);-webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);}
.showpageOf{display:none!important}
#blog-pager-older-link a:hover {background: #37d1dc;}
a#Blog1_blog-pager-older-link:after{margin-right: 20px;float: right;}
a#Blog1_blog-pager-older-link:before{margin-left: 20px;float: left;}
a#Blog1_blog-pager-older-link:hover:after{transform: rotate(-180deg);background:#e01280}
a#Blog1_blog-pager-older-link:hover:before{transform: rotate(180deg);background:#e01280}
#blog-pager-older-link a {max-width: 96%;float:none;}
a#Blog1_blog-pager-older-link:before, a#Blog1_blog-pager-older-link:after{background: #535353;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;transition: transform 0.8s;content: "";-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'></path></svg>");}

• Untuk Template lain

Mungkin kalian bisa hapus CSS selector Blog Pager #blog-pager. Jika ada banyak silakan kalian hapus CSS Blog pager yang berada di dalam tag Multiple Items isMultipleItems. Contoh dibawah.

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

Kemudian ganti dengan kode dibawah 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:#5b86e5;float: none;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: #37d1dc;}

3. Cari kode dibawah
Baca juga : Cara Membuat Search by Voice (Pencarian dengan Suara) di Blog

<b:includable id='nextprev'>

Jika tidak ada, cari kode dibawah ini, jika ada banyak, Pilih yang ada di dalam area widget Blog1.

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

Hapus Semua ganti dengan code dibawah ini.

<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 + &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'>
               <b:if cond='data:blog.pageType == &quot;item&quot;'>Older Post<b:else/>Artikel Berikutnya</b:if>
        </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>

~ Artikel Berikutnya adalah tulisan yang ada di tombol untuk Homepage, silakan ganti sesuai keinginan kalian.
~ Older Post adalah tulisan kembali ke post sebelumnya yang ada di dalam post blog, silakan ganti sesuai keinginan kalian.
4. Masukan kode Javascript dibawah ini di ATAS </body>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
  // Infinite Scroll Blogger
  !function(ignielScroll) {
    var auto = false; // true atau false
    var img = 'https://i.pinimg.com/originals/3e/f0/e6/3ef0e69f3c889c1307330c36a501eb12.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>
  </b:if>
</b:if>

var auto : Pengaturan di buat Auto load atau tidak.


• True : Postingan muncul otomatis, tanpa klik.
• False : Postingan tidak muncul otomatis dan pengunjung harus melakukan klik pada tombol terlebih dahulu.




var img : URL gambar yang tampil saat loading.

5. Jika menu navigasi homepage di template kalian sudah dilengkapi script navigasi bernomor silakan kalian hapus, agar tidak bentrok.
• Untuk template viomagz kalian HAPUS SEMUA kode dibawah ini

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR -->
<script>
var perPage=8;
var numPages=6;
var firstText ='<b:switch var='data:blog.locale'><b:case value='id' />Pertama<b:default />First</b:switch>';
var lastText ='<b:switch var='data:blog.locale'><b:case value='id' />Terakhir<b:default />Last</b:switch>';
var prevText ='&#8250; <b:switch var='data:blog.locale'><b:case value='id' />Sebelumnya<b:default />Prev</b:switch>';
var nextText ='<b:switch var='data:blog.locale'><b:case value='id' />Selanjutnya<b:default />Next</b:switch> &#8250;';
var urlactivepage=location.href;
var home_page="/";
</script>
<script>
//<![CDATA[
if(numberedPagination==1){
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;
...
...
...
label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
};
//]]>
</script>
</b:if>
</b:if>
</b:if>

• Untuk template lain, silakan bisa menyesuaikan sendiri untuk peletakan kode script navigasi bernomor, untuk di hapus.

6. Simpan tema, dan lihat hasilnya.

Untuk demonya kalian bisa lihat di homepage website ini. Klik disini.

Mungkin itu yang dapat saya sampaikan semoga dapat sampaikan semoga dapat bermanfaat. Sekian dan terima kasih