ដាក់​ប្រកាស​ពេញ​និយម ​ដែល​មាន​ផ្ទៃ​ពណ៌​ចំរុះ

ប្រភពៈ អាក្បាលធំ

   ជា​ទូទៅ​ម្ចាស់​គេហទំព័រ/ប្លក តែងតែ​ដាក់​ Popular Posts Gadget ដើម្បី​បង្ហាញ​ប្រកាស​ដែល​ពេញ​និយម ​ដើម្បី​អោយ​អ្នក​ចូល​ទស្សនា​បាន​ដឹង​ថា គេ​ហ​ទំព័រ​ដែល​គេ​កំពុង​មើល​នេះ ​មាន​អត្ថបទ​​អ្វី​ដែល​ទទួល​បាន​ការ​ចាប់​អារម្មណ៍ មាន​អ្នក​មើល​ច្រើន​ជាង​គេ។ Popular​​ Posts gadget គឺ ​សម្រាប់​ដាក់​បង្ហាញ​អត្ថបទ​ដែល​មាន​អ្នក​អាន​ច្រើន​ជាង​គេ (គិត​ជា​ប្រចាំ​សប្ដាហ៍, ខែ និង​គ្រប់​ពេល) ដែល​មាន​ស្រាប់​ក្នុង​ប្រព័ន្ធ Blogger តែ​ពេល​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ពី​របៀប​ដាក់​កូដ ធ្វើ​ឲ្យ Popular Posts gadget មាន​ផ្ទៃ​ពណ៌​ចំរុះ មើល​ទៅ​ស្រស់​ស្អាត​ ទាក់ទាញ​ភ្នែក​អ្នក​ចូលទស្សនា​ប្លក។ សូម​មើល​ពី​របៀប​ដាក់​ខាង​ក្រោម​នេះ៖

ទី​មួយ​ត្រូវ​ដាក់ Popular Posts Gadget អោយ​ហើយ​មុន​សិន

នៅ​ក្នុង​ប្រព័ន្ធ Blogger មាន Popular Posts gadget ស្រាប់​រង់ចាំ​តែលោក​អ្នក​បើក​ប្រើ​តែ​ប៉ុណ្ណោះ ដូច្នេះ​លោកអ្នក​ត្រូវ​បើក​វា​អោយ​ដំណើរការ​ជា​មុន​សិន​ដោយ៖
- កត់ត្រា​ចូល (Log In) គណនី Blogger របស់​លោក​អ្នក
- ចូល​ទៅ Layout >> Addd a Gadget (សូម​មើល​រូប​ខាង​ក្រោម)

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

- ចុច​លើ​វា​ដើម្បី​កំណត់​លក្ខខណ្ឌ​អោយ​កូន​កម្មវិធី Popular Posts Gadget

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

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

Popular Posts Gadget

- ឃើញ​ថា​ការ​ដាក់ Popular Posts Gadget ខាង​លើ​ គ្រាន់​តែ​ជា​ការ​តាម​បែប​ធម្មតា (ដែល​មាន​ស្រាប់​ក្នុង Blogger)​ គឺ​មិន​ទាន់​មាន​ផ្ទៃ​ពណ៌​ចំរុះ​នៅ​ឡើយ​ទេ ដូច្នេះ​ដើម្បី​អោយ​វា​មាន​ពណ៌​ចំរុះ យើង​ត្រូវ​បន្ថែម​កូដ​ចូល​ក្នុង Template ។

របៀប​ដាក់​កូដ "ផ្ទៃ​ពណ៌​ចំរុះ" ទៅ​អោយ Popular Posts Gadget

- បម្រុង​ទុក Tamplate របស់​ប្លក​លោក​អ្នក​ជា​មុន​សិន​ (ដើម្បី​បង្ការ​)
- ចូល​ទៅ​កាន់ Template >> Edit HTML >> Proceed (សូមមើល​រូប​ខាង​ក្រោម)

-ស្វែង​រក​ពាក្យ​ថា  ]]></b:skin>  (បើ​សិន​ជា​ចង់​លឿន​សូម​ចុច : F3 ឬ Ctrl+F រួច​វាយ​ ពាក្យ​ស្វែង​រក​ខាង​លើ ក្នុង​ប្រអប់​ស្វែង​រក​របស់ Browser។
- ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​បិទភ្ជាប់​ពី​លើ​ពាក្យ  ]]></b:skin> ​ រួច​ចុច​ប៊ូតុង Preview ដើម្បី​មើល​សាកល្បង​សិន។ បើ​ត្រឹមត្រូវ​ហើយ ​សូម​ចុច​ប៊ូតុង  Save Template ជា​ការ​ស្រេច (សូម​មើល​រូប​ខាង​ក្រោម)

កូដ​ ផ្ទៃ​ពណ៌​ចម្រុះ សម្រាប់ Popular Posts Widget 

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

- នោះ​លោក​អ្នក​នឹង​ទទួល​បាន​លទ្ធផល​ស្រដៀង​រូប​ខាង​ក្រោម​នេះ៖

   ឃើញ​ថា​បន្ទាប់​ពី​បញ្ចូល​កូដ​រួច​ហើយ Popular Posts Gadget ប្រែ​ទៅ​ជា​មាន​ផ្ទៃ​ពណ៌​ចំរុះ​យ៉ាង​ស្រស់​ឆើត​ គួរ​អោយ​គយគន់។ ប៉ុន្តែ​មាន​បញ្ហា​បន្តិច​ត្រង់​ថា លេខ​រៀង​ស្ថិត​មិន​ចំកណ្ដាល​រង្វង់​មូល ប្រហែល​ជា​មក​ពី​ពុម្ព​អក្សរ​។ សូម​រីករាយ​ជាមួយ​ការ​ដាក់ "​ប្រកាស​ពេញ​និយម ​ដែល​មាន​ផ្ទៃ​ពណ៌​ចំរុះ"៕