Cara Mudah Memasang Load More Post di Blog 100% Work

Memasang Load More Post

Codepelajar.com- Cara Mudah Memasang Load More Post di Blog 100% Work - Pada halaman depan sebuah blog yang berisikan banyak informasi dan tutorial menarik seperti Code Pelajar ini, biasanya untuk berpindah ke halaman pertama dan selanjutnya menggunakan tombol / link Next dan Previous, ada juga yang memakai page number seperti template yang dipakai code pelajar ini.

Namun apa sobat tahu bahwa ada sebuah metode degan kode javascript yang memungkinkan halaman ini ketika kita klik untuk pindah ke halaman berikutnya, website atau blog tidak akan di refresh / di reload oleh browser. Nah metode ini biasa disebut dengan Load More Post, yang memungkinkan postingan postingan blogger ditampilkan tanpa harus berpindah ke halaman lainnya.


Cara Memasang Load More di Blogger


Sebelum memasang Load More JS,sobat harus mengetahui struktur postingan di blog kalian, karena setiap blog memiliki template yang berbeda. Caranya dengan inspek element seperti gambar di bawah ini.


cara setting load more post

BACA JUGA : CARA MEMASANG CHATANGO MELAYANG DI BLOG


Kalo sudah paham, maka kalian tinggal mencocokan class atau id dari atributnya saja di settingan Load More Post di kode berikut



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>
/*<![CDATA[*/
setTimeout(function(){
!function(e,t){e.InfiniteScroll=function(n){function r(e,n){return(n=n||t).querySelectorAll(e)}function o(e){return void 0!==e}function a(e){return"function"==typeof e}function s(e,t){e=e||{};for(var n in t)e[n]="object"==typeof t[n]?s(e[n],t[n]):t[n];return e}function i(e,t,n){return o(e)?o(t)?void(o(n)?u[e][n]=t:u[e].push(t)):u[e]:u}function l(e,t){o(t)?delete u[e][t]:u[e]=[]}function d(e,t){if(o(u[e]))for(var n in u[e])u[e][n](t)}function c(){return H.innerHTML=p.text.loading,L=!0,M?(j.classList.add(p.state.loading),d("loading",[p]),void h(M,function(e,n){j.className=m+" "+p.state.load,(g=t.createElement("div")).innerHTML=e;var o=r("title",g),a=r(p.target.post,g),s=r(p.target.anchors+" "+p.target.anchor,g),i=r(p.target.post,T);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&i.length){var l=i[i.length-1];t.title=o,l.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+A+'"></span>'),g=t.createElement("div");for(var c=0,u=a.length;u>c;++c)g.appendChild(a[c]);l.insertAdjacentHTML("afterend",g.innerHTML),f(),M=!!s.length&&s[0].href,L=!1,A++,d("load",[p,e,n])}},function(e,t){j.classList.add(p.state.error),L=!1,f(1),d("error",[p,e,t])})):(j.classList.add(p.state.loaded),H.innerHTML=p.text.loaded,d("loaded",[p]))}function f(e){if(H.innerHTML="",v){g.innerHTML=p.text[e?"error":"load"];var t=g.firstChild;t.onclick=function(){return 2===p.type&&(v=!1),c(),!1},H.appendChild(t)}}var p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:(h="infinite-scroll-state-")+"load",loading:h+"loading",loaded:h+"loaded",error:h+"error"}},u={load:[],loading:[],loaded:[],error:[]};(p=s(p,n||{})).on=i,p.off=l;var g=null,h=function(t,n,r){if(e.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",t),o.send()}},v=1!==p.type,L=!1,T=r(p.target.posts)[0],H=r(p.target.anchors)[0],M=r(p.target.anchor,H),y=t.body,j=t.documentElement,m=j.className||"",w=T.offsetTop+T.offsetHeight,x=e.innerHeight,E=0,b=null,A=1;if(M.length){M=M[0].href,T.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),g=t.createElement("div"),f();var S=function(){w=T.offsetTop+T.offsetHeight,x=e.innerHeight,E=y.scrollTop||j.scrollTop,L||w>E+x||c()};S(),0!==p.type&&e.addEventListener("scroll",function(){v||(b&&e.clearTimeout(b),b=e.setTimeout(S,500))},!1)}return p}}(window,document);var infinite_scroll=new InfiniteScroll({
type:0,
target:{
   /* == SESUAIKAN DENGAN TEMPLATE YANG SOBAT PAKAI == */
   posts:"#Blog1 .widget-content .items.flex", /* == POSTS TARGET == */
   post:".card",   /* == POST TARGET == */
   anchors:".blog-pager", /* == ANCHORS TARGET == */
   anchor:".older-link", /* == ANCHOR TARGET == */
},
text:{load:'<a class="js-load waves-effect waves-light" href="javascript:;">Load More</a>',
      loading:'<span class="js-loading" style="cursor:wait;">Loading...</span>',
      loaded:'<span class="js-loaded">Loaded</span>',
      error:'<a class="js-error" href="javascript:;">Error</a>'
     }
    });
},500)
  /*]]>*/</script>
</b:if>
</b:if>

Simpan kode di atas tempat di atas kode tag html </body> . dan lihat hasilnya.

Itulah Cara memasang LOAD MORE POST yang bisa sobat pasang di blog-blog sobat. Keuntungan memasang ini yaitu user tidak harus me-refresh secara berulang sehingga userpun betah saat melihat daftar postingan di blog sobat. Baiklah sampai jumpa di tutorial selanjutnya di CODEPELAJAR.COM atau baca postingan dibawah berikut.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel