Cara Membuat Load More Agar Loading Blog Lebih Cepat
www.azid45.web.id - Cara Membuat Load More Agar Loading Blog Lebih Cepat. Assalamualikum.wr.wb, pada kesempatan ini saya akan share cara membuat load more. Apa itu load more? apa bedanya load more dengan read more?. Ok, sebelum melihat cara membuat load more pada postingan blog teman-teman yang biasanya dapat dimuat di home page, laman label, maupun laman statis tentunya kita haru tahu load more itu sendiri. Secara sederhana load more merupakan meload atau memanggil atau memuat postingan agar lebih banyak tanpa menekan next dan previous sehingga kita memuat blog lebih lama karena memindahkan Url awal ke Url yang baru. Dengan load more ini sudah jelas blog teman-teman akan lebih fast loading dikarenakan tanpa memuat halaman blog kita ke Url yang baru, selain itu trik ini akan menghilangkan "https://www.dominanda.com/feeds/posts/summary?max-results=1&alt=jso" yang tentunya berfek samping blog teman-teman lambat atau mempunyai skor lebih rendah di Pagespeed Insights maupun di Gtmetrix.
Lantas apa bedanya load more dengan read more? tentunya dengan penjelasan diatas kita sudah paham antara load more dengan read more. Jikalau load more adalah memuat postingan lebih banyak maka read more adalah membaca artikel lebih banyak "baca selengkapnya". Bagaimana teman-teman sudah jelas bukan? insyaallah sudah jelas ya.
Adakah keunggulan membuat load more dengan script yang saya bagikan ini?. Untuk pertanyaan ini jangan diragukan lagi, pasti load more yang saya bagikan ini tidak akan menjadikan blog teman-teman semakin lambat justru sebaliknya, karena script yang akan saya bagikan ini adalah script internal jadi tidak usah memanggilnya sebagaimana script eksternal seperti JQuery maupun Font Awesome. Selain itu trik ini saya ambil langsung dari empuhnya blog SEO dan Fast Loading, ya bang Ozik Jarwo blog terkenal optimasi seo dan fast loading blog blog.kodejarwo.com. Tutorial ini saya ambil dari template beliau denan view-soruce dan saya modifikasi ulang tampilannya agar lebih menarik.
Ok, sebelum menuju tutorial ini langkah awal adalah jika blog teman-teman memakai menu page navigation maka teman-teman harus menghapus javascriptnya terlebih dahulu, biasanya terdapat di antara kode <body> ...... </body>. Adapun jika blog teman-teman menu pada home pagenya standar dari blogger "older post - newer post postingan selanjutnya - postingan sebelumnya" maka teman-teman bisa langsung menuju tutorial cara membuat load more.
Keterangan: Contoh Kode javascript menu page navigation "next 1,2,3,4,5 .... 1000 last" saya beri contoh yang dipakai pada template viomagz, mungkin jika teman-teman menggunakan menu page navigation selain template ini bisa dicari dahulu barang kali mirip atau langsung tanya ke pembuat template yang teman-teman gunakan sekarang. Lihat contoh javascript menu page navigation dibawah ini;
<script>
//<![CDATA[
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>
Membuat Load More
Pertama, Langkah awal untuk membuat load more adalah teman-teman menuju pada menu template - edti HTML kemudian masukkan kode berikut tepat diatas kode </head>
<style>a.js-load, .buttonx {display:inline-flex;cursor:pointer;background:#2d82ea;color:#fff!important;font-weight:500;font-size:14px;padding:8px 20px;display:inline-block;border-radius:5px;margin:20px 5px;box-shadow:0 1px 6px rgba(32,33,36,.28);text-transform:uppercase}.buttonx:active{opacity:.8;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)} a.js-load:hover, .buttonx:hover, buttonx#Disqus:hover {opacity:0.6}</style>
Keterangan: kode #2d82ea adalah warna background sedangkan #fff adalah warna tulisan, jika teman-teman tidak menyukainya bisa diganti dengan kode warna yang lain. Bisa lihat pada link disini
Kedua, Langkah selanjutnya copy kode dibawah ini dan pastekan tepat diatas kode </body>
<b:if cond='data:view.isMultipleItems'>
<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,0200))},!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="js-load" href="javascript:;">Load More</a>',
loading: '<a class="js-load">...</a>',
loaded: '<a class="js-load">Selesai</a>',
error: '<a class="js-load">ERROR</a>'
}
});
//]]>
</script></b:if>
Ketiga, Langkah terakhir adalah Save Template dan lihat hasilnya.
Demikianlah cara membuat load more agar loading blog teman-teman semakin cepat dan tampilannya juga semakin menarik. Semoga artikel ini bermanfaat, Amin. Jika teman-teman belum paham dan gagal untuk mencoba bisa comment pada kolom komentar dibawah.
Keterangan: selain bisa untuk load more, kode css-nya juga bisa untuk membuat tombol menu seperti demo, download dan lain sebagainya. Caranya adalah tinggal menambahkan kode class="buttonx" sebelum href seperti <a href="alamat-Url"/> menjadi <a calass="buttonx" href="alamat-Url"/>.
UPDATE 06/01/2019
Jika teman-teman pada blognya memakai font awesome dan ingin lebih keren bisa ganti script dibawah ini. Untuk script yang diatas jangan dihapus semua, namun cukup cari yang dihapus cuma yang mirip script dibawah ini dan ganti dengan script dibawah ini;
load: '<a class="js-load" href="javascript:;">Load More</a>',
loading: '<a><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a>',
loaded: '<a class="js-load">Selesai</a>',
error: '<a class="js-load">ERROR</a>'Dan jika hasil dari "tombol load more" berada disebelah sisi kiri maka perlu menambahkan kode .center {text-align:center} dan taruh diatas </style> dan tambahkan <div class="center"> ..... </div> pada bagian load, loding, loaded dan error. Untuk Lengkapnya lihat script berikut;
load: '<div class="center"><a class="js-load" href="javascript:;">Load More</a></div>',
loading: '<div class="center"><a><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a></div>', loaded: '<div class="center"><a class="js-load">Selesai</a></div>', error: '<div class="center"><a class="js-load">ERROR</a></div>'
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.