Blog Archive

Contact Me

Name

Email

Message

Credits

កើត​ចាស់​ឈឺ​ស្លាប់​ជា​ទៀងទាត់
🌱🌳⛈️🏡🛌💤⛈️🌧️🌳

Hover Setting

slideup

កម្មវិធីសំខាន់ៗ ↘︎↘︎↘︎

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

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

សម្គាល់​៖ ប្រសិន​បើ​អ្នក​មាន​កូដ​លេខ​ទំព័រ (Page Navigation Number) ដែល​កំពុង​ប្រើ​ប្រាស់​នៅ​លើ​ស្បែក​ប្លុក​តម្រូវ​ឲ្យ​អ្នក​លុប​ចោល​ជា​មុន​សិន​។

១-សូម​ចូល​ទៅ​កាន់​គណនី​ប្លុក​របស់​អ្នក​
២-ចូល​ទៅ​កាន់ Theme បន្ទាប់​មក Edit HTML
៣-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​ក្រោម <head>
ចំណាំ​៖ ប្រ​សិន​បើ​អ្នក​មាន​កូដ Icon Font Awesome Version 5 រួច​រាល់​នៅ​ក្នុង​ស្បែក​ប្លុក​សូម​រំ​លង​ចំណុច​នេះ

កូដ
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

៤-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ ]]></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}

៥-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ
កូដ
<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:3,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​៕
________________
ផ្ដល់​គន្លឹះ​ដោយ : https://www.rithisethtes.com/2019/08/ajax-loadmore.html

No comments

Post a Comment

៙ គោលការណ៍ក្នុងការផ្តល់យោបល់ ៖
1. យោបល់ត្រូវតែសរសេរជាភាសាខ្មែរ ពាក្យបច្ចេកទេសអាច​សរសេរជាភាសាអង់គ្លេស។
2. យោបល់មិនត្រូវលើសពី 1000 តួអក្សរឡើយ។ ការបំបែកយោបល់មិនត្រូវបានអនុញ្ញាតទេ។
3. យោបល់ដែលចាត់ទុកថាជា Spam ឬមានគោលបំណងផ្សព្វផ្សាយពាណិជ្ជកម្មតែមួយមុខ នឹងត្រូវលុប។
4. ការពិភាក្សាអំពីនយោបាយមិនត្រូវបានអនុញ្ញាតនៅលើគេហទំព័រនេះទេ។
5. ការចែករំលែកតំណភ្ជាប់ដែលពាក់ព័ន្ធត្រូវបានអនុញ្ញាត។ តំណភ្ជាប់និងតម្រងពាក្យ​ខ្លះ​ត្រូវ​បាន​ហាមឃាត់។
6. យោបល់ដែលរអ៊ូរទាំអំពីប្រធានបទនៃការបង្ហោះ ឬប្រភពរបស់វានឹងត្រូវលុប។
7. ការប្រើភាសាប្រមាថក្នុងយោបល់ ឬឈ្មោះអ្នកប្រើប្រាស់នឹងបណ្តាលឱ្យមានការហាមឃាត់។
8. ការវាយប្រហារ/ការបៀតបៀនដោយផ្ទាល់ នឹងបណ្តាលឱ្យមានការហាមឃាត់ភ្លាមៗ។
9. អ្នកសម្របសម្រួលអាចកែប្រែ/លុបយោបល់ដោយមិនចាំបាច់ជូនដំណឹង។