តម្លើង Ajax Infinity Load More សម្រាប់បង្ហាញអត្ថបទបន្ថែម

on
    Ajax Infinity Load More គឺជាប៊ូតុងមួយប្រើសម្រាប់បង្ហាញអត្ថបទ​ បន្ថែម​ទៀត រាល់ពេលដែល អ្នកចុចទៅ លើប៊ូតុង នោះវានឹងបង្ហាញចំនួនប្រកាសអត្ថបទដែលមាននៅលើទំព័រដើមបន្ថែមទៀត ដោយអ្នកមិនចាំបាច់ កំណត់ចំនួន Posts នោះឡើយ។ ខុសពី  Page Navigation Number (លេខទំព័រ) ដែលអ្នកត្រូវតែកំណត់ចំនួន Posts ឲត្រូវទៅនឹងអត្ថបទដែល មាននៅលើ Homepage។
ចំណាំ៖ ប្រសិនបើអ្នកមាន Codes លេខទំព័រ (Page Navigation Number) ដែលកំពុងប្រើនៅលើ ស្បែក​ប្លក់ តម្រូវឲលុបចោលជាមុនសិន។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head> 
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' rel='stylesheet'/>
៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ ]]></b:skin> 
.load-post{clear:both;text-align:center;margin:5px auto}
.load-post a,.load-post span{background:#039BE5;position:relative;color:#fff;display:table;overflow:hidden;margin:0 auto;padding:0 20px;text-transform:uppercase;font-size:14px;transition:all .5s}
.load-post a:hover,.load-post span:hover{background:#0288D1;color:#fff;}
.load-post span.js-loading{border-color:#2e6da4;color:#fff}
.load-post span.js-loading:hover{background:#2e6da4!important;color:#fff!important}
.load-post span.js-loaded{background:#f44336;color:#fff}
.load-post span.js-loaded:hover{background:#c62828!important;color:#fff!important}
.load-post span.js-error{background:#f44336;color:#fff}
.load-post span.js-error:hover{background:#c62828!important;color:#fff!important}
.load-post i{margin-left:5px;margin-right:0}
៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body> 
<b:if cond='data:view.isMultipleItems'>
<script type='text/javascript'>
//<![CDATA[
!function(A,H){A.InfiniteScroll=function(e){function d(e,t){return(t=t||H).querySelectorAll(e)}function n(e){return void 0!==e}function r(e){return"function"==typeof e}function c(e,t){if(n(o[e]))for(var a in o[e])o[e][a](t)}function a(){return i.innerHTML=u.text.loading,h=!0,v?(m.classList.add(u.state.loading),c("loading",[u]),void t(v,function(e,t){m.className=b+" "+u.state.load,(p=H.createElement("div")).innerHTML=e;var a=d("title",p),n=d(u.target.post,p),r=d(u.target.anchors+" "+u.target.anchor,p),o=d(u.target.post,g);if(a=a&&a[0]?a[0].innerHTML:"",n.length&&o.length){var s=o[o.length-1];H.title=a,s.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+M+'"></span>'),p=H.createElement("div");for(var i=0,l=n.length;i<l;++i)p.appendChild(n[i]);s.insertAdjacentHTML("afterend",p.innerHTML),f(),v=!!r.length&&r[0].href,h=!1,M++,c("load",[u,e,t])}},function(e,t){m.classList.add(u.state.error),h=!1,f(1),c("error",[u,e,t])})):(m.classList.add(u.state.loaded),i.innerHTML=u.text.loaded,c("loaded",[u]))}function f(e){if(i.innerHTML="",s){p.innerHTML=u.text[e?"error":"load"];var t=p.firstChild;t.onclick=function(){return 2===u.type&&(s=!1),a(),!1},i.appendChild(t)}}var u={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:(t="infinite-scroll-state-")+"load",loading:t+"loading",loaded:t+"loaded",error:t+"error"}},o={load:[],loading:[],loaded:[],error:[]};(u=function e(t,a){for(var n in t=t||{},a)t[n]="object"==typeof a[n]?e(t[n],a[n]):a[n];return t}(u,e||{})).on=function(e,t,a){return n(e)?n(t)?void(n(a)?o[e][a]=t:o[e].push(t)):o[e]:o},u.off=function(e,t){n(t)?delete o[e][t]:o[e]=[]};var p=null,t=function(e,t,a){if(A.XMLHttpRequest){var n=new XMLHttpRequest;n.onreadystatechange=function(){if(4===n.readyState){if(200!==n.status)return void(a&&r(a)&&a(n.responseText,n));t&&r(t)&&t(n.responseText,n)}},n.open("GET",e),n.send()}},s=1!==u.type,h=!1,g=d(u.target.posts)[0],i=d(u.target.anchors)[0],v=d(u.target.anchor,i),l=H.body,m=H.documentElement,b=m.className||"",x=g.offsetTop+g.offsetHeight,y=A.innerHeight,T=0,L=null,M=1;if(v.length){v=v[0].href,g.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),p=H.createElement("div"),f();var w=function(){x=g.offsetTop+g.offsetHeight,y=A.innerHeight,T=l.scrollTop||m.scrollTop,h||T+y<x||a()};w(),0!==u.type&&A.addEventListener("scroll",function(){s||(L&&A.clearTimeout(L),L=A.setTimeout(w,500))},!1)}return u}}(window,document);var infinite_scroll=new InfiniteScroll({type:2,target:{posts:".blog-posts",post:".index-post",anchors:".blog-pager",anchor:".blog-pager-older-link"},text:{load:'<div class="load-post"><a class="js-load" href="javascript:;">Load More <i class="fas fa-angle-down"></i></a></div>',loading:'<div class="load-post"><span class="js-loading" style="cursor:wait;">Loading...<i class="fas fa-spinner fa-pulse"></i></span></div>',loaded:'<div class="load-post"><span class="js-loaded">Loaded!<i class="far fa-frown"></i></span>',error:'<a class="js-error" href="javascript:;">Error!<i class="fas fa-exclamation-triangle"></i></a></div>'}});
//]]>
</script>
</b:if>
៦-ចុចពាក្យ Save Theme។

Comments

Post a Comment