របៀប​ដាក់​អត្ថ​បទ​ពេញ​និយម (POPULAR POST) ដែល​មាន​ផ្ទៃ​ពណ៌​ចម្រុះ​រាង​បួន​ជ្រុង​ដែល​មាន​កូន​រូប​រាង​មូល ផុស​ចេញ​មក​ជា​មួយ

  
 ការ​ដាក់​ប្រកាស​ពេញ​និយម គឺ​ជា​ធាតុ​ក្រាហ្វិក​ប្លក​ដែល​យើង​គួរ​តែ​ដាក់​ក្នុង​ប្លក​ ដើម្បី​ឲ្យ​អ្នក​ទស្សនា​ដឹង​ថា តើ​ប្រកាស​ណា​មួយ​ដែល​មាន​អ្នក​ចូល​អាន​ច្រើន​ជាង​គេ​ក្នុង​មួយ​សប្ដាហ៍ រាល់​​ម៉ោង ឬ​មួយ​ខែ​ក្តី។ នៅ​ក្នុង​ប្លក​ករ ក៏​មាន Widget ស្រាប់​របស់​វា​ដែល​អាច​ដាក់​បាន​ដែរ  តែ​ទាល់​ត្រង់​ថា វា​គ្មាន​ម៉ូត​អី​ទេ គឺ​ចេញ​អក្សរ​សាមញ្ញៗ ធម្មតាៗ ដែល​ធ្វើ​ឲ្យ​ប្លក​យើង​មិន​មាន​ភាព​ទាន់​សម័យ។ ដោយ​សារ​តែ​ហេតុ​នេះ​ហើយ ទើប​ខ្ញុំ​បាទ សូម​ណែ​នាំ​លោក​អ្នក ដោយ​សរសេរ​អត្ថ​បទ​នេះ​ឡើង ដើម្បី​បង្កើត​ជា​សោភ័ណ​ភាព​សម្រាប់​ ធ្វើ​ឲ្យ​ប្រកាស​ពេញ​និយាម​មាន​ផ្ទៃ​ពណ៌​ចម្រុះ​រាង​ចតុ​កោណ​បួន​ជ្រុង ដែល​មាន​កូន​រូប​អម​មក​ជា​មួយ​រាង​មូល។ ការ​ដែល​ធ្វើ​ឲ្យ​កូន​រូប​រាង​
មូល​មក​ជា​មួយ​វា​មិន​សូវ​ជា​មាន​លក្ខណៈ​ប្លែក​ស្អី​ប៉ុន្មាន​ទេ តែ​អ្វី​ដែល​សំខាន់​នៅ គឺ​កូន​រូប​រាង​មូល​ដែល​នៅ​លើ​នោះ ពេល​ដែល​យើង​ដាក់​ Mouse ពី​លើ​វា គឺ​លោត​ផុស​ចេញ​មក​ក្រៅ ហើយ​ចេញ​រាង​ផ្សេង​គួរ​ឲ្យ​ព្រឺ​ក្បាល។ ហេស!!! សង្ឃឹម​ថា គន្លឹះ​មួយ​នេះ​លោក​អ្នក​នឹង​អាច​ធ្វើ​បាន។ សូម​មើល​របៀប​ដាក់​​ខាង​ក្រោម ៖
៙ ទី​មួយ​ត្រូវ​ដាក់ Labels ឲ្យ​ហើយ​មុន​សិន ៖
យើង​ត្រូវ​ដាក់ ចំណាត់​ក្រុម (Labels) ដែល​មាន​ស្រាប់​នៅ​ក្នុង Blogger ជា​មុន​សិន :
- កត់ត្រា​ចូល (Log In) គណនី Blogger របស់​លោក​អ្នក។
- ចូល​ទៅ Layout >> Addd a Gadget (សូម​មើល​រូប​ខាង​ក្រោម)

- រមូល (Scroll) ​ចុះ​ក្រោមរក​មើល Gadget ឈ្មោះ​ថា Popular Posts (សូម​មើល​រូប​) 

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

- Title : ជា​ឈ្មោះ Gadget អ្នក​អាច​ដាក់​ជា​ភាសា​ខ្មែរ​បាន (ប្រកាស​ពេញ​និយម) ឬ​ក៏​មិន​បាច់​ដូរ​ក៏​បាន។
- Most viewed : បង្ហាញ​ចំណង​ជើង​ប្រកាស​ដែល​មាន​អ្នក​អាន​ច្រើន​ជាង​គេ ​គិតជា ក្នុង​​សប្ដាហ៍, ក្នុង​ខែ ឬ​ក៏ គ្រប់​ពេល។
- Show : កំណត់​ការ​បង្ហាញ​ចំណង​ជើង​ប្រកាស ភ្ជាប់​មក​ជាមួយ ៖
     + image thumbnail : កំណត់​អោយ​បង្ហាញ​រូបភាព​តូច​ក្នុង​ប្រកាស​បើ​មាន (សូម​​ធីក​ដើម្បី​បាន​កូន​រូប​​មក​ជា​មួយ)
     + snippet : បង្ហាញ​អត្ថបទ​សង្ខេប​បន្តិច​ពី​ក្រោម​ចំណង​ជើង (សូម​កុំ​ធីក)
- Display up to ... post(s) : កំណត់​ចំនួន​បង្ហាញ​ចំណង​ជើង​ប្រកាស​ (ខ្ញុំ​សូម​អោយ​អ្នក​បង្ហាញ​​ច្រើន​បំផុត​តែ​ប្រាំបួន​ (9) ចំណងជើង​ប្រកាស​ល្បីៗ​បាន​ហើយ ។
- កំណត់​រួច​សូម​ចុច​ប៊ូតុង Save ដើម្បី​រក្សា​ទុក។ រួច​អ្នក​អា​ច​ចាប់​ទាញ Popular Posts Gadget ទៅ​ដាក់​នៅ​ទីតាំង​សមរម្យ ដែល​អ្នក​ចង់​បាន (ឧទាហរណ៍ នៅ​ខាង​ក្រោម​គេ​បំផុត​ក្នុង​ផ្នែក​ខាង​ស្ដាំ)។

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

- ចូល​ទៅ Template >> Edit HTML (សូម​មើល​រូប​ខាង​ក្រោម)

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា

- ចម្លង​កូដ​ខាង​ក្រោម​ យក​ទៅ​​បិទ​​ភ្ជាប់​​​ពី​លើ​ស្លាក ]]></b:skin> រួច​​ហើយ​សូម​​ចុច Save template ​ជាការស្រេច។ មើល​រូប​ខាង​ក្រោម​នេះ ដើម្បី​ដឹង​កាន់​តែ​ច្បាស់​ពី​កន្លែង​ដាក់​កូដ

កូដ​​ដាក់​អត្ថ​បទ​ពេញ​និយម (POPULAR POST) ដែល​មាន​ផ្ទៃ​ពណ៌​ចម្រុះ​រាង​បួន​ជ្រុង​

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

៙ សង្ឃឹម​ថា​លោក​អ្នក​នឹង​ធ្វើ​បាន។ សូម​អរគុណ​ចំពោះ​ការ​ទស្ស​នា។