Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Membuat Infinite Scroll [Load More] Blogger
Cara Membuat Infinite Scroll [Load More] Blogger

Cara Membuat Infinite Scroll [Load More] Blogger

By Dewa Plokis
Infinite Scroll atau yang sering juga disebut page Load More adalah pengganti page navigation pada homepage blogger. Page navigation yang umumnya menggunakan unlimited number. Merubah page navigation pada template blogger memiliki efek yaitu membuat loading blog menjadi lebih ringan.

Load more ini merupakan sebuah script yang berfungsi untuk memanggil postingan lain yang tidak muncul pada homepage / halaman depan / awal. Postingan lain yang dimaksud adalah postingan sebelumnya atau poistingan lama pada blogspot yang tidak ditampilkan.

Cara Membuat Infinite Scroll [Load More] Blogger
Pada homepage umumnya, blogger memunculkan hanya sekitar 7 atau 8 artikel saja. Ini karena jika memunculkan postingan terlalu banyak maka akan merusak tampilan blog itu sendiri, apalagi jika artikel yang dimunculkan memiliki gambar, tentulah akan semakin memberatkan loading blog. Maka alternatif yang dilakukan pada halaman depan blog adalah membuat Page Navigation Unlimited atau Membuat Tombol Load More. Dan pada postingan tutorial kali ini, saya akan membahas cara membuat dan memasang Load more atau biasa disebut dengan istilah Infinite Scroll.

Ada yang bertanya, "apa bedanya load more dan read more?". Perlu dingat bahwa, Load more ini berbeda dengan Read more. Load more berfungsi untuk menampilakan atau memanggil artikel lain yang tidak terlihat pada homepage, sedangkan read more memunculkan artikel secara penuh pada halaman HTMLnya sendiri.
Untuk readmore sendiri, nanti juga akan saya buatkan tutorialnya. karna kali ini kita akan fokus ke load more.

Manfaat Menggunakan Tombol Load More

Berikut ini merupakan kesimpulan tentang manfaat menggunakan tombol postingan selanjutnya pada homepage. Kenapa mengganti Unlimited Page Navigation Blogger ke infinite Scroll (Load More)?. Ada 2 alasan umum blogger merubah Page Nav bernomor, yaitu:
1. Memberatkan Blog saat diload
Sebenarnya alasan ini memang benar, script json pada Navigasi Halaman Bernomor memberikan sumbangan load yang sangat tinggi. Biasanya sekitar 600-700 ms per-loadnya. Sudah hampir 1 detik untuk memuat hanya 1 script saja. Sementara jika menggunkan tombol inifinity scroll, tidak akan memengaruhi loading karena tidak adanya pemanggilan AJAX max-result.

2. Link URL tidak SEO Friendly
Anda bisa melihat saat klik salah satu angka pada page navigation, dan lihat URL yang dihasilkan. Contohnya seperti ini :
https://dewaplokis.blogspot.com/search?updated-max=2020-02-11T14%3A00%3A00%2B08%3A00&max-results=7#PageNo=4
URL tersebut hampir mirip seperti URL SPAM, jika Anda tidak melakukan settingan pada Robots.txt, maka dipastikan Anda akan selalu mendapatkan pesan error dari search console google. Sementara jika menggunakan tombol loadmore, link halaman homepage tidak berubah dan tidak terdapat penambahan link selain URL homepage itu sendiri.

Jika pada page navigation homepage, terdapat penambahan angka yang jika angka tersebut di klik maka akan mengarahkan kita ke page postingan blogger sebelumnya. Beberapa blogger menerapkan pemasangan load more dan mengganti page navigation bernomor karena script tersebut memberatkan proses pemuatan blog.

Untuk pemasangan Infinite Scroll ini, silakan ikuti tutorialnya dibawah.

Cara Pasang infinite Scroll [Load More] di Blogger

Silakan masuk ke akun Blogger Anda terlebih dahulu dan pastikan sudah berada dalam mode Edit HTML Template.

1. Cari kode HTML page nav ini <b:includable id='nextprev'> pada blog Anda. Biasanya kodenya seperti ini

Cara Membuat Infinite Scroll [Load More] Blogger

Setelah ketemu, hapus lalu ganti kode tersebut dengan kode ini
<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. Pasang script Load more.
Sebelum pemasangan ini dilakukan, Anda harus mengahapus semua script page navigation yang Ada dalam template blog Anda. Biasanya kode script ini berada sebelum </body>. Contoh kodenya seperti ini :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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://cdn.rawgit.com/rachma92/tipsterkini/master/unlipage.js' type='text/javascript'/>
</b:if>

Atau jika menggunakan template viomagz, jenis scriptnyta adalah seperti 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 =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Pertama<b:default/>First</b:switch>&#39;;
var lastText =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Terakhir<b:default/>Last</b:switch>&#39;;
var prevText =&#39;&#8250; <b:switch var='data:blog.locale'><b:case value='id'/>Sebelumnya<b:default/>Prev</b:switch>&#39;;
var nextText =&#39;<b:switch var='data:blog.locale'><b:case value='id'/>Selanjutnya<b:default/>Next</b:switch> &#8250;&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</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. Setelah Script Navigation sebelumnya sudah terhapus, Salin dan pastekan kode dibawah ini sebelum </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. Selanjutnya adalah mempercantik tampilan infinite scrollnya dengan menambahkan kode CSS berikut sebelum ]]></b:skin>. Namun hapus terlebih dahulu kode CSS sebelumnya
/* 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}


Memasang Load More di Blogspot Keren & SEO Friendly

Untuk cara yang kedua ini, khusus untuk template Viomagz, karena jika menggunakan kode dan cara diatas, Scriptnya tidak bekerja. Maka sebagai alternatif, kita menggunakan metode berikut ini:

1. Silakan hapus semua script infinite scroll pada bawaan template.

2.  Pasang script ini sebelum </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. Terakhir, tambahkan kode CSS berikut ini sebelum ]]></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);}}

Untuk hasilnya, Anda bisa klik link dibawah ini.

Demikian Tutorial Cara Membuat Infinite Scroll [Load More] Blogger dengan CSS dan JS ringan, fast Loading dan SEO Friendly. Semoga bermanfaat. Terima kasih.
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed