Home » Uncategories » របៀប​ដាក់​ឆ្នុច​ ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត (Load more posts) នៅ​ក្នុង​ប្លុក

របៀប​ដាក់​ឆ្នុច​ ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត (Load more posts) នៅ​ក្នុង​ប្លុក

បញ្ចេញមតិ
   ថ្ងៃ​នេះ​ដូច​ជា​​មាន​ក្បាច់​គុន​ដែល​មិន​ធ្លាប់​បង្ហាញ​មួយ ដែល​គិត​ថា​មាន​បង​ប្អូន​យើង​គាត់​ចង់​ដឹង។ នេះ​គឺ​ជា​ការ​ដាក់​ឆ្នុច ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត នៅ​ក្រោម​អត្ថ​បទ ដែល​នៅ​ក្នុង​ភាសា​អង់​គ្លេស​ថា Load more posts។ តើ​អ្នក​ស្គាល់​ Load more posts ជា​អ្វី​ទេ? នៅ​ពេល​ដែល​យើង​ដាក់​ឆ្នុច Load more posts នេះ​ក្នុង​​ប្លុក ហើយ​អ្នក​ទស្សនា​ចុច​ឆ្នុច​នេះ​ទៅ វា​នឹង​បង្ហាញ​អត្ថបទ​ថែម​ទៀត។ បើ​អ្នក​ដាក់​ចំនួន​ប្រកាស​នៅ​ទំព័រ​មុខ៧ ពេល​ដែល​ចុច​ឆ្នុច Load more posts នោះ លោក​អ្នក​នឹង​ឃើញ​ប្រកាស​ចំនួន ៧​ទៀត។ ខ្ញុំសូម​បង្ហាញ​ពី​របៀប​ដាក់​និង​មាន​បី​ម៉ូត ដូច​រូប​ខាង​លើ​នេះ​បង្ហាញ​ស្រាប់។

   សម្រាប់​វិធី​ដាក់​គឺ​វា​គ្មាន​អី​ពិបាក​នោះ​ទេ គ្រាន់​តែ​មុន​ពេល​យើង​ដាក់​យើង​ត្រូវ​មាន​លក្ខណៈ​មួយ​ចំនួន​ប៉ុណ្ណោះ។ គឺ​ថា បើ​លោកអ្នក​ធ្លាប់​ដាក់ "លេ​ខ​រុករក​ទំព័រ​" (Page Navigation) ពី​មុន​មក​ហើយ សូម​ចូល​ទៅ​លុប​ឬ​ដក​ចោល​សិន ព្រោះ​មិន​ដូច​នេះ​ទេ វា​នឹង​មិន​ចេញ Load more posts ឡើយ។

៙ វិធី​​ដាក់​ឆ្នុច​ ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត (Load more posts) នៅ​ក្នុង​ប្លុក ៖
- កត់ត្រា​ចូល Log In ក្នុង​គណនី​ Blogger របស់​អ្នក​។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)
- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)
-ចម្លង​កូដ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript ហើយ​ចុច​ប៊ូ​តុង Save។
-បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget (Title) មិន​ចាំ​បាច់​ដាក់​ទេ។
-ពេល​ដែល Save ហើយ សូម​ចាប់​ទាញ​វា​ទៅ​ដាក់​ផ្នែក​ខាង​ក្រោម​​ប្រកាស (Post) នៃ​ប្លុក (មើល​រូប)។

កូដ​ឆ្នុច​​ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត (Load more posts)
1. សម្រាប់​ពណ៌ ឈាម​ជ្រូក ៖
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.techirsh.com -->
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.techirshloader{
border:1px solid #72021c;-webkit-box-shadow: #B4B5B5 1px 1px 1px ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a90329;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#a90329), to(#6d0019));
 background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
 background-image: -moz-linear-gradient(top, #a90329, #6d0019);
 background-image: -ms-linear-gradient(top, #a90329, #6d0019);
 background-image: -o-linear-gradient(top, #a90329, #6d0019);
 background-image: linear-gradient(to bottom, #a90329, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a90329, endColorstr=#6d0019);
}

.techirshloader:hover{
 border:1px solid #450111; background-color: #77021d;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#77021d), top(#3a000d));
 background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
 background-image: -moz-linear-gradient(top, #77021d, #3a000d);
 background-image: -ms-linear-gradient(top, #77021d, #3a000d);
 background-image: -o-linear-gradient(top, #77021d, #3a000d);
 background-image: linear-gradient(to bottom, #77021d, #3a000d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}
</style>

2. សម្រាប់​ពណ៌ ត្រួយ​ចេក ៖
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.techirsh.com -->
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.techirshloader{
border:1px solid #34740e;-webkit-box-shadow: #B4B5B5 1px 1px 1px ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #4ba614;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#4ba614), to(#008c00));
 background-image: -webkit-linear-gradient(top, #4ba614, #008c00);
 background-image: -moz-linear-gradient(top, #4ba614, #008c00);
 background-image: -ms-linear-gradient(top, #4ba614, #008c00);
 background-image: -o-linear-gradient(top, #4ba614, #008c00);
 background-image: linear-gradient(to bottom, #4ba614, #008c00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#008c00);
}

.techirshloader:hover{
 border:1px solid #224b09; background-color: #36780f;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#36780f), top(#005900));
 background-image: -webkit-linear-gradient(top, #36780f, #005900);
 background-image: -moz-linear-gradient(top, #36780f, #005900);
 background-image: -ms-linear-gradient(top, #36780f, #005900);
 background-image: -o-linear-gradient(top, #36780f, #005900);
 background-image: linear-gradient(to bottom, #36780f, #005900);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
}
</style>

3. សម្រាប់​ពណ៌ ផ្កា​ឈូក ៖
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.techirsh.com -->
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.techirshloader{
border:1px solid #ff2596;-webkit-box-shadow: #B4B5B5 1px 1px 1px ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #ff5db1;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5db1), to(#ef007c));
 background-image: -webkit-linear-gradient(top, #ff5db1, #ef007c);
 background-image: -moz-linear-gradient(top, #ff5db1, #ef007c);
 background-image: -ms-linear-gradient(top, #ff5db1, #ef007c);
 background-image: -o-linear-gradient(top, #ff5db1, #ef007c);
 background-image: linear-gradient(to bottom, #ff5db1, #ef007c);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff5db1, endColorstr=#ef007c);
}

.techirshloader:hover{
 border:1px solid #f60080; background-color: #ff2a98;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff2a98), top(#bc0062));
 background-image: -webkit-linear-gradient(top, #ff2a98, #bc0062);
 background-image: -moz-linear-gradient(top, #ff2a98, #bc0062);
 background-image: -ms-linear-gradient(top, #ff2a98, #bc0062);
 background-image: -o-linear-gradient(top, #ff2a98, #bc0062);
 background-image: linear-gradient(to bottom, #ff2a98, #bc0062);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff2a98, endColorstr=#bc0062);
}
</style>
>> នៅ​ត្រង់​ពាក្យ​ពេចន៍ ឃ្លោង​ឃ្លា មួយ​ចំនួន អាច​ប្ដូរ​មក​ភាសា​ខ្មែរ​បាន។

អត្ថបទស្រដៀងគ្នា:

0 Response to "របៀប​ដាក់​ឆ្នុច​ ផ្ទុក​ប្រកាស​ជា​ច្រើន​ទៀត (Load more posts) នៅ​ក្នុង​ប្លុក"

Post a Comment

Subscribe to: Post Comments (Atom)