Cara Mudah Memasang Load More Post Dengan Tombol di Blog

Cara Membuat Load More Untuk Meringankan Loading Blog | Fungsi widget load more ini adalah menggantikan posisi blogpager untuk menampilkan postingan selanjutnya.

Yang biasanya menggunakan tombol older post dan newt post atau ada juga menggunakan tombol next-prev.


Untuk pengguna Wordpress, Jika ingin memasang load more post,  mereka cukup menggunakan plugin atau biasanya sudah tersedia opsi dalam theme untuk menggunakan  navigasi next-prev, nomor atau load more.

Untuk memasang tombol next-prev di blog sudah saya bahas pada artikel sebelumnya yang bisa sobat baca disini:

Cara membuat blogpager next-prev dengan icon SVG

Jika sobat tertarik silahkan ikuti cara memasangnya pada artikel tersebut.

Berbeda dengan pengguna Blogger dimana mereka  harus membuat scriptnya manual  terlebih dahulu lalu memasangnya.

Nah, load more post ini akan menggantikan posisi tombol navigasi tersebut dengan tombol load more.

Apa perbedaan load more dengan Tombol navigasi next-prev?

Perbedaanya hanya dalam mekanismenya saja, pada tombol load more ini tidak merefresh halaman saat tombolnya diklik, cukup  klik tombol load more tanpa harus pindah halaman.

Dengan menggunakan widget load more post ini, sobat tidak perlu berpindah halaman ketika pengunjung akan melihat sebelumnya.

Cukup dengan mengklik tombol load more, postingan lama akan muncul dibawahnya.

Apa kelebihan widget load more dari tombol next-prev?

Ada beberapa keunggulaln menggunakan tombol load more ketimbang menggunakan halaman navigasi bernomor atau next-prev.

Nah, apa saja keunggulan tombol load more dari pada navigasi bernomor, diantaranya sebagai berikut:

1. Tombol load more lebih ringan.
2. Tidak berpengaruh buruk pada  score di PageSpeed Insights
3. Tampilan lebih menarik
4. Salah satu cara yang ampuh untuk menurunkan bounce rate
5. Memasang load more lebih mudah dari pada navigasi bernomor
6. dan lain sebagainya

Bagi sobat yang tertarik untuk memasang widget load more pada template sobat, silahkan ikuti langkah-langkahnya dibawah ini:

Cara Mengganti Older Post Menjadi Load More Di Blog

1. Seperti biasa masuk ke blogger, Template - Edit HTML
2. Hapus Kode navigasi sebelumnya (Jika ada)
3. Tambahkan CSS dibawah ini diatas kode </style> atau ]]></b:skin>

/* Tombol Load More */
.sedang-loading,.muatlagi{background-color:#fff;font-size: 16px;font-weight: bold;margin: 0px auto;padding: 7px 15px;text-align: center;white-space: nowrap;border-radius: 25px;box-shadow: 0 5px 4px rgba(0,0,0,0.05);border: 1px solid #00000012;}
a.sedang-loading,a.muatlagi{color:#000}
.sedang-loading:after{width: 14px;height: 14px;margin-left: 10px;vertical-align: -2px;display: inline-block;animation: aqilSpin .75s linear infinite normal;-webkit-animation: aqilSpin .75s linear infinite normal;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='%23aaa'></path></svg>") center no-repeat;content: '';}
.muatlagi:hover,.sedang-loading:hover{box-shadow:-1px 9px 11px 0px rgba(0,0,0,0.05)}
@keyframes aqilSpin {from {transform:rotate(0deg)}to {transform:rotate(360deg)}}
@-webkit-keyframes aqilSpin {from { -webkit-transform: rotate(0deg)} to { -webkit-transform:rotate(360deg)}}

4. Setelah itu, simpan script dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>//<![CDATA[
!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 c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.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:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!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()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);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="muatlagi" href="javascript:;">Lihat Artikel Lainnya</a>',
loading: '<a class="sedang-loading">Sedang dimuat</a>',
loaded: '<span class="muatlagi">Sudah di halaman terakhir</span>',
error: '<a class="muatlagi">error!</a>'
}
});
//]]></script>
</b:if></b:if>

5. Jangan lupa save dan lihat hasilnya.

Khusus pengguna template viomagz, silahkan hapus terleblih dahulu 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;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>

Untuk melihat hasilnya sobat bisa lihat dihalaman berikut ini:



Demikian tutorial cara membuat widget load more pada blog, semoga bermanfaat