ជាទូទៅម្ចាស់គេហទំព័រ/ប្លក តែងតែដាក់ 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
- បម្រុងទុក 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}
#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 ប្រែទៅជាមានផ្ទៃពណ៌ចំរុះយ៉ាងស្រស់ឆើត គួរអោយគយគន់។ ប៉ុន្តែមានបញ្ហាបន្តិចត្រង់ថា លេខរៀងស្ថិតមិនចំកណ្ដាលរង្វង់មូល ប្រហែលជាមកពីពុម្ពអក្សរ។ សូមរីករាយជាមួយការដាក់ "ប្រកាសពេញនិយម ដែលមានផ្ទៃពណ៌ចំរុះ"៕
ឃើញថាបន្ទាប់ពីបញ្ចូលកូដរួចហើយ Popular Posts Gadget ប្រែទៅជាមានផ្ទៃពណ៌ចំរុះយ៉ាងស្រស់ឆើត គួរអោយគយគន់។ ប៉ុន្តែមានបញ្ហាបន្តិចត្រង់ថា លេខរៀងស្ថិតមិនចំកណ្ដាលរង្វង់មូល ប្រហែលជាមកពីពុម្ពអក្សរ។ សូមរីករាយជាមួយការដាក់ "ប្រកាសពេញនិយម ដែលមានផ្ទៃពណ៌ចំរុះ"៕
អត្ថបទដើម ៖ អាក្បាលធំ