ប្រកាស​ពេញ​និយម (POPULAR POST) ជា​ម៉ូត​មាន​ចលនា​ប្លែក​ភ្នែក

   ថ្ងៃ​នេះ យើង​ហាក់​ដូច​ជា​ត្រឡប់​មក​កាន់​រឿង​ចាស់​វិញ តែ​តាម​ពិត​ម៉ូត​នៃ​ការ​ធ្វើ​ឲ្យ​ប្រកាស​ពេញ​និយម ឬ​ក្នុង​ភាសា​អង់គ្លេស គេ​ហៅ​ថា Popular Post  នេះ​ទើប​នឹង​បង្ហាញ​ខ្លួន​ថ្មីៗ​នេះ​ទេ។ ការ​ឆ្នៃ​ម៉ូត​ប្រកាស​ពេញ​និយម​ពេល​នេះ គឺ​មាន​លក្ខណៈ​ប្លែក​ភ្នែក​មិន​ធម្មតា​ឡើយ ដោយ​សារ​តែ​វា​មាន​ទាំង​ចលនា​ដ៏​រស់​រវើក​ពេល​ដែល​យើង​យក​​ម៉ៅ​ដាក់​ពី​លើ។

៙ ទី​មួយ​ត្រូវ​ដាក់ POPULAR POSTឲ្យ​ហើយ​មុន​សិន ៖
   យើង​ត្រូវ​ដាក់ ប្រកាស​ពេញ​និយម (POPULAR POST) ដែល​មាន​ស្រាប់​នៅ​ក្នុង Blogger ជា​មុន​ :
- កត់ត្រា​ចូល (Log In) គណនី Blogger របស់​លោក​អ្នក។

- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា Popular Posts រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- លោក​អ្នក​នឹង​ឃើញ​ដូច​ខាង​ក្រោម ហើយ​សូម​ធ្វើ​ការ​កំណត់​ ៖

- Title : ជា​ឈ្មោះ Gadget អ្នក​អាច​ដាក់​ជា​ភាសា​ខ្មែរ​បាន (ប្រកាស​ពេញ​និយម) ឬ​ក៏​មិន​បាច់​ដូរ​ក៏​បាន។

- Most viewed : បង្ហាញ​ចំណង​ជើង​ប្រកាស​ដែល​មាន​អ្នក​អាន​ច្រើន​ជាង​គេ ​គិតជា ក្នុង​​សប្ដាហ៍, ក្នុង​ខែ ឬ​ក៏ គ្រប់​ពេល។ (ស្រេច​តែ​អ្នក)

- Show : កំណត់​ការ​បង្ហាញ​ចំណង​ជើង​ប្រកាស ភ្ជាប់​មក​ជាមួយ ៖

   + image thumbnail : កំណត់​អោយ​បង្ហាញ​រូបភាព​តូច​ក្នុង​ប្រកាស​បើ​មាន (សូម​ធីក)

   + snippet : បង្ហាញ​អត្ថបទ​សង្ខេប​បន្តិច​ពី​ក្រោម​ចំណង​ជើង (សូម​ធីក)

- Display up to ... post(s) : កំណត់​ចំនួន​បង្ហាញ​ចំណង​ជើង​ប្រកាស​ (ខ្ញុំ​សូម​អោយ​អ្នក​បង្ហាញ​​ច្រើន​បំផុត​តែ​ប្រាំបួន​ (10) ចំណងជើង​ប្រកាស​ល្បីៗ​បាន​ហើយ (អ្នក​អាច​ដាក់​តិច​ជាង​នេះ)។

- កំណត់​រួច​សូម​ចុច​ប៊ូតុង Save ដើម្បី​រក្សា​ទុក។ រួច​អ្នក​អា​ច​ចាប់​ទាញ Popular Posts Gadget ទៅ​ដាក់​នៅ​ទីតាំង​សមរម្យ ដែល​អ្នក​ចង់​បាន (ឧទាហរណ៍ នៅ​ខាង​ក្រោម​គេ​បំផុត​ក្នុង​ផ្នែក​ខាង​ស្ដាំ)។

៙ ជំហាន​ទី​ពីរ ជា​ជំហាន​ដែល​ត្រូវ​ដាក់​កូដ ៖

- ចូល​ទៅ​កាន់​ម៉ឺនុយ Template >> Edit HTML (មើលរូប)

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា បើ​សិន​ជា​វា​មិន​ទាន់​ត្រូវ​បាន​ពន្លា​ចេញ។
- រមូល​ចុះ (scroll down) ទៅ​ដល់ ]]></b:skin>

- ចម្លង​កូដ​ខាង​ក្រោម​ទៅ​បិទ​​ភ្ជាប់​ ​នៅ​ពី​លើ​ស្លាក ]]></b:skin> ​។
/* Popular Posts */ .PopularPosts .item-thumbnail{float:none;margin:0 0 10px} .PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;} .PopularPosts .item-title:hover{background:rgba(0,0,0,.2)} .PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)} .PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)} .PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear} .PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;} .PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;} .PopularPosts .item-snippet{display:none;} .PopularPosts ul li .item-content{position:relative;overflow:hidden;} .PopularPosts ul{padding:0;line-height:normal;counter-reset:count;} .PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;} .PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;} .PopularPosts .widget-content ul li:hover:before{right:-55px;} .PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);} .PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);} .PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);} .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);} .PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);} .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);} .PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);} - បន្ទាប់​មក ស្វែង​រក​កូដ </body> (សូម​ចុច Ctrl + F ទើប​ងាយ​រក)។
- ពេល​រក​ឃើញ​ហើយ សូម​បិទភ្ជាប់ (Past) កូដ​ខាង​ក្រោម​នៅ​ពី​លើ </body> ។
<script type='text/javascript'> // Popular Post Thumb$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});//<![CDATA[// Custom Popular Post$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});//]]></script> - ពេល​ដាក់​កូដ​រួច​រាល់​អស់​ហើយ សូម​ចុច ប៊ូតុង Save Template ជា​ការ​ស្រេច។

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

Tweet