Infinite Scroll, or page Load More, replaces page navigation on the blogger homepage. Page navigation generally uses an unlimited number. Changing the page navigation on the blogger template has the effect of making blog loading lighter.
Load more is a script that functions to call other posts that don't appear on the homepage/front page/start. The other posts in question are previous or old posts on Blogspot that are not displayed.
On the homepage in general, bloggers display only about 7 or 8 articles. This is because if too many posts appear it will damage the appearance of the blog itself, especially if the articles that appear have images, of course, it will be even more burdensome to load the blog. So the alternative that is done on the front page of the blog is to make Unlimited Page Navigation or Make a Load More Button. And in this tutorial post, I will discuss how to create and install Load more commonly known as Infinite Scroll.
Someone asked, "what's the difference between loading more and read more?". Keep in mind that Load more is different from Read more. Load more functions to display or load other articles that are not visible on the homepage, while reading more displays the full article on its own HTML page.
For the read-more itself, I will also make a tutorial later. because this time we will focus on load more.
Benefits of Using the Load More Button
The following is a conclusion about the benefits of using the next post button on the homepage. Why change Unlimited Page Navigation Blogger to infinite Scroll (Load More)?. There are 2 common reasons bloggers change numbered Page Nav, namely:
1. Burdening the Blog when loaded
Actually, this reason is true, the JSON script on Numbered Page Navigation gives a very high load contribution. Usually around 600-700 ms per load. It's almost 1 second to load only 1 script. Meanwhile, if you use the infinity scroll button, it will not affect loading because there is no max-result AJAX call.
2. URL links are not SEO Friendly
You can see when you click one of the numbers on the page navigation, and see the resulting URL. Examples like this:
https://niadzgn.blogspot.com/search?updated-max=2023-02-11T14%3A00%3A00%2B08%3A00&max-results=7#PageNo=4
The URL is almost like a SPAM URL, if you don't make settings on Robots.txt, then you will certainly always get an error message from the Google search console. Meanwhile, if you use the load more button, the homepage link does not change and there are no additional links other than the URL of the homepage itself.
If on the homepage navigation page, there are additional numbers if the number is clicked it will direct us to the page of the previous blogger post. Some bloggers apply load more installation and replace numbered page navigation because the script makes the blog loading process burdensome.
To install Infinite Scroll, please follow the tutorial below.
How to Install Infinite Scroll [Load More] on Blogger
Please log in to your Blogger account first and make sure it is in Edit HTML Template mode.
1. Find this page nav HTML code <b:includable id='nextprev'>on your blog. Usually, the code is like this
After finding it, delete it and then replace the code with this code
<b:includable id='nextprev'>
<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>
2. Install the Load more script.
Before this installation is done, you must delete all page navigation scripts that are in your blog template. Usually this script code is before </body>. Example code like this:
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://raw.githack.com/psdbenz/i/main/unlipage.js' type='text/javascript'/>
</b:if>
Or if you use the viomagz template, the script type is like this:<b:if cond='data:blog.isMobile == "false"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- 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 ='› <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> ›';
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;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
};
//]]>
</script>
</b:if>
</b:if>
</b:if>
3. After the previous Navigation Script has been deleted, copy and paste the code below before</body>
<script>
//<![CDATA[
/*infinite scroll*/
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function f(){return L.innerHTML=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l("loading",[p]),void u(y,function(t,n){M.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+j+'"></span>'),h=e.createElement("div");for(var f=0,u=a.length;u>f;++f)h.appendChild(a[f]);d.insertAdjacentHTML("afterend",h.innerHTML),c(),y=i.length?i[0].href:!1,T=!1,j++,l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l("error",[p,t,e])})):(M.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function c(t){if(L.innerHTML="",v){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(v=!1),f(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E>w+b||f()};A(),0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
type: 0,
target: {
posts: '.blog-posts',
post: '.date-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Muat Lagi</a>',
loading: '<span class="js-loading" style="cursor:wait;">Memuat\u2026</span>',
loaded: '<span class="js-loaded">Dimuat.</span>',
error: '<a class="js-error" href="javascript:;">Kesalahan.</a>'
}
});
//]]>
</script>
4. Next is to beautify the appearance of the infinite scroll by adding the following CSS code before ]]></b:skin>. But first delete the previous CSS code
/* Infinite Scroll Navigation by NiaDzgn */
#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}Installing Load More on Cool & SEO-Friendly Blogspot
For the second method, specifically for the Viomagz template, because if you use the code and method above, the script doesn't work. So as an alternative, we use the following method:
1. Please delete all infinite scroll scripts in the default template.
2. Put this script before </body>
<b:if cond='data:view.isHomepage'>
<script>
//<![CDATA[
!function(){var E,k;"undefined"!=typeof linkMagzSetting&&void 0!==linkMagzSetting.infiniteScrollNav||(linkMagzSetting={infiniteScrollNav:!0}),1==linkMagzSetting.infiniteScrollNav&&(E=window,k=document,E.InfiniteScroll=function(t){function d(t,e){return(e=e||k).querySelectorAll(t)}function r(t){return void 0!==t}function o(t){return"function"==typeof t}function f(t,e){if(r(i[t]))for(var n in i[t])i[t][n](e)}function n(){return l.innerHTML=u.text.loading,p=!0,v?(T.classList.add(u.state.loading),f("loading",[u]),void e(v,function(t,e){T.className=H+" "+u.state.load,(g=k.createElement("div")).innerHTML=t;var n=d("title",g),r=d(u.target.post,g),o=d(u.target.anchors+" "+u.target.anchor,g),i=d(u.target.post,h);if(n=n&&n[0]?n[0].innerHTML:"",r.length&&i.length){var a=i[i.length-1];k.title=n,a.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+S+'"></span>'),g=k.createElement("div");for(var l=0,s=r.length;l<s;++l)g.appendChild(r[l]);a.insertAdjacentHTML("afterend",g.innerHTML),c(),v=!!o.length&&o[0].href,p=!1,S++,f("load",[u,t,e])}},function(t,e){T.classList.add(u.state.error),p=!1,c(1),f("error",[u,t,e])})):(T.classList.add(u.state.loaded),l.innerHTML=u.text.loaded,f("loaded",[u]))}function c(t){if(l.innerHTML="",a){g.innerHTML=u.text[t?"error":"load"];var e=g.firstChild;e.onclick=function(){return 2===u.type&&(a=!1),n(),!1},l.appendChild(e)}}var u={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:(e="infinite-scroll-state-")+"load",loading:e+"loading",loaded:e+"loaded",error:e+"error"}},i={load:[],loading:[],loaded:[],error:[]};(u=function t(e,n){for(var r in e=e||{},n)e[r]="object"==typeof n[r]?t(e[r],n[r]):n[r];return e}(u,t||{})).on=function(t,e,n){return r(t)?r(e)?void(r(n)?i[t][n]=e:i[t].push(e)):i[t]:i},u.off=function(t,e){r(e)?delete i[t][e]:i[t]=[]};var g=null,e=function(t,e,n){if(E.XMLHttpRequest){var r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState){if(200!==r.status)return void(n&&o(n)&&n(r.responseText,r));e&&o(e)&&e(r.responseText,r)}},r.open("GET",t),r.send()}},a=1!==u.type,p=!1,h=d(u.target.posts)[0],l=d(u.target.anchors)[0],v=d(u.target.anchor,l),s=k.body,T=k.documentElement,H=T.className||"",L=h.offsetTop+h.offsetHeight,M=E.innerHeight,m=0,y=null,S=1;if(v.length){v=v[0].href,h.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),g=k.createElement("div"),c();function x(){L=h.offsetTop+h.offsetHeight,M=E.innerHeight,m=s.scrollTop||T.scrollTop,p||m+M<L||n()}x(),0!==u.type&&E.addEventListener("scroll",function(){a||(y&&E.clearTimeout(y),y=E.setTimeout(x,500))},!1)}return u})}();var infinite_scroll=new InfiniteScroll({type:0,target:{posts:'.blog-posts',post:'.post-outer',anchors:'.blog-pager',anchor:'.blog-pager-older-link'},text:{load:'<a class="js-load" href="javascript:;">Load More</a>',loading:'<a class="js-loading">Loading...</a>',loaded:'<span class="js-loaded">The End</span>',error:'<a class="js-error">Oops! Error</a>'}}); //]]>
</script>
</b:if>
3. Finally, add the following CSS code before ]]></b:skin>
.blog-pager a.blog-pager-newer-link,.blog-pager a.blog-pager-older-link,.blog-pager a.js-load,.blog-pager span.js-loaded,.blog-pager a.js-loading{background:#b15f3e;color:#ffffff;}
.js-loading:after{border:2px solid #ffffff;}
.blog-pager a.js-load:hover,.blog-pager span.js-loaded:hover,.blog-pager span.js-loading:hover,a.blog-pager-newer-link:hover,a.blog-pager-older-link:hover{background:#925035;}
.blog-pager{text-align:center;font-size:12px;font-size:.75rem;text-transform:uppercase;}
.blog-pager a.blog-pager-newer-link,.blog-pager a.blog-pager-older-link{display:inline-block;border-radius:4px;padding:6px 12px;-webkit-transition:all .2s;transition:all .2s;}
.blog-pager a.blog-pager-older-link{float:right;}
.blog-pager a.blog-pager-older-link:after{content:"";border-width:0 2px 2px 0;display:inline-block;padding:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.blog-pager a.blog-pager-newer-link{float:left;}
.blog-pager a.blog-pager-newer-link:before{content:"";border-width:0 0 2px 2px;display:inline-block;padding:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.blog-pager:after{content:"";display:block;clear:both;}
.blog-pager .js-load,.blog-pager .js-loaded,.blog-pager .js-loading{display:inline-block;border-radius:4px;padding:8px 20px;-webkit-transition:all .2s;transition:all .2s;}
.blog-pager .js-loading:after{content:"";width:10px;height:10px;vertical-align:middle;margin-left:.5rem;margin-bottom:3px;border-radius:100%;display:inline-block;border-top:2px solid transparent;-webkit-animation:load-animate 1s linear infinite;animation:load-animate 1s linear infinite;}
@-webkit-keyframes load-animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35;}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);}}
@keyframes load-animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35;}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);}}
For the results, you can click the link below.
Thus the tutorial on how to make Infinite Scroll [Load More] Blogger with lightweight CSS and JS, fast loading and SEO friendly. Hope it is useful. Thank You.
Wrong Template Uploaded
ReplyDeletePlease check it again
Send me the template MATERIAL PRO telegram t.me/wisdak_dev
thanks
Test Comment
ReplyDelete