I find this really useful, many website owners find this kind of thing really annoying, especially on blogger, even most visitors find it annoying, whereby you click on the next page, the whole page will automatically refresh. Well, some users don't really care about it, since it's just a few seconds refresh. Now, these scripts I'll be sharing to you guys will make you click on the next page without reloading/refreshing.
Now there are two types of scroll available at the moment, the first one is the autoloaded page, the next page will load itself when you scroll to the end of the page, and that makes new content show itself without you clicking anything. While the other one is autoloaded on click, users would have to click a button to load the next page or to show more articles without the page reloading.
Steps On How to make the infinite scroll without reloading work
Step 1) Install JQuery on your blog, copy the code below and paste it below your <head> tag in your HTML. If you have JQuery before, don't bother doing it again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>
Step 2) Now remove all your CSS selectors from your blog pager, which is normally named #blog-pager, And if you find any of them there, just make sure you delete them all that is inside the multiple items conditional tag isMultipleitems. Check out the example below, so you won't get confused.
#blog-pager-older-link {...}
#blog-pager-older-link:hover {...}
a.blog-pager-older-link {...}
a.blog-pager-older-link:hover {...}
Then you will replace all above to this CSS below
/* 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}
Step 3) Now look for this code below.
<b:includable id='nextprev'>
If there is no result for this code, there must be a lot to chose from, which is in the widget area Blog1.
<b:includable id='postPagination' var='post'>
After that, now delete everything and replace it with this code below
<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 + "_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 is the writing on the button, you can change it to whatever you want.
Step 4) Now copy this code below and save the script from blogger infinite scroll above the </body> tag.
<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/AVvXsEjKqTqs4k0DZUnwj2s8BRw-x4nx3u8QGOq7ZJnRzl8C0ObxsR-6DRSXn0cdoK869WaUfSUqsubRaYi-RMRB8hYJMpf46oh2XxrPXoPo1CH5LMPXilYqFArwnHNxZhskQyY7xoZTy8ceTF0V/s1600/ayo-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>
Variable and information
Var auto:
true: subsequent posts appear automatically without the need to click when the pages reach the deadline.
false: subsequent posts do not appear automatically and visitors need to click on the button first.
Var image: The URL of the image that shows up during the loading process.
So yeah we are done here, and always make sure you save your work when done. And if the home page navigation menu in your template has been equipped with another custom script, like the numbered navigation, then the script must be deleted so that the conflict does not occur.
