Percepat Loading Blog dengan Memasang Tombol Load More

Cara Memasang Tombol Load More di blog yang akan saya bagikan ini adalah yang simple dan juga hampir 100% work untuk dipasang disemua template. Saya sendiri sudah coba menerapkannya di blog saya satunya dengan template Viomagz dari Mas Sugeng.

Serius ni mas work di semua template? Ya di coba dulu atuh gan. Saya kan bilangnya hampir di semua template ya, itu bukan berarti benar-benar work di semua template. So silahkan Anda langsung coba saja ya. Oke sampai disini dapat dimengerti kan ya.

Apa itu Load More Post?

Nah mungkin akan ada pertanyaan seperti ini, jadi akan saya jelaskan sedikit tentang apa si load more post itu.

Jadi Load More Post adalah sebuah fitur yang saat ini sedang ramai digunakan untuk menggantikan Page Navigation sebuah blog. Jadi sebenarnya fungsinya sama dengan Navigation blog yang tujuannya untuk melihat post selanjutnya.

Yang membedekan Load More dengan Page Navigation adalah, dengan menggunakan load more post ini pengunjug tidak pelu loading cukup lama untuk pindah halaman ke post selanjutnya. Dan kabar baiknya Load More Post dipercaya dapat meningkatkan loading blog, score seo dan kecepatan template serta meminilasir bengkaknya bounce rate suatu blog. Wih canggih bukan.

Lalu bagaimana cara membuatnya mas? Susah ya?

Tidak, tidak susah kok, lihat saja langsung tutorial dibawah ini ya.

Cara Memasang Tombol Load More Post di Blogger

Sebelum melanjutkan tutorial saya ingin sampaikan kepada Anda semua bahwa script load more post ini di dapatkan dari Kode Jarwo.

Jadi sebelumnya saya ucapkan terimakasih untuk Kode Jarwo karena telah memberikan script load more post ini. Oke langsung kita ke tutorialnya.

• Buka Blogger.com
• Masuk dengan akun google yang ada blog Anda
• Kemudian pilih blog mana yang akan di beri Load More Post
• Masuk ke Tema > Pilih Edit HTML
• Kemduian silahkan cari kode berikut ini

</body>

• Copy dan paste kode berikut ini tepat di atas 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="js-load" href="javascript:;">Liat Artikel Lainnya</a>',
loading: '<a class="js-load">Sabar gan...</a>',
loaded: '<span class="js-load">Dah ah, capek!</span>',
error: '<a class="js-load">Hadeh error!</a>'
} }); //]]></script> <style> .js-load{display:block;width:100%;text-align:center;font-size:20px;margin:20px}</style> </b:if></b:if>

• Jika sudah klik Simpan Template
• Lihat blog Anda untuk tau hasilnya
• Done

Baca Juga: Cara Jitu Mempercepat Loading Blog Anda

Bagaimana sangat mudah bukan cara memasang load more post blogger ini. Semoga bermanfaat ya.