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

ថ្ងៃ​នេះ​ប្លក់​អាសត្វ​ចម្លែក​សូម​បង្ហាញ​ជូន​លោក​អ្នក​នូវ​របៀប​វិធី​ថ្មី​ មួយ​គឺ​ការ​ដាក់ អត្ថបទ​ពេញ​និយម​ ដែល​នៅ​ក្នុង​ភាសា​អ៊ីង​កាលីស​ថា (POPULAR POST) ដែល​ភាគ​ច្រើន​ណាស់​នៅ​ក្នុង​ប្លក់​ ឬ​គេហ​ទំព័រ​ផ្សេងៗ​ភាគ​ច្រើន​មិន​ដែល​រំលង​នូវ​ការ​ដាក់​នេះ​ទេ ព្រោះ​ថា ដើម្បី​ឲ្យ​អ្នក​ទស្ស​នា​ដឹង​ថា តើ​អត្ថ​បទ​ណា​មួយ​ដែល​យើង​ដាក់​ប្រកាស​មាន​ប្រសិទ្ធ​ភាព​ (មើល​ច្រើន) ជាង​គេ។ ហើយ​គ្រាន់​តែ​ប្លែក​ត្រង់​ថា ការ​នោះ​មាន​ម៉ូត​យ៉ាង​ណា​យ៉ាង​ណី​នោះ​ស្រេច​តែ​គេ​ចង់ ឯ​ខ្ញុំ​វិញ​​ក៏​នឹក​ចង់​ដាក់​ប្រ​កាស​ពេញ​និយម​ដែល​មាន​ផ្ទៃ​ពណ៌​ចម្រុះ​ រាង​បួន​ជ្រុង​ចាប់​ផ្តើម​ពី​លើ​ទំហំ​ធំ រហូត​តូច​ទៅៗ តាម​លំដាប់។ ខ្ញុំ​ក៏​ធ្លាប់​បាន​ឃើញ​ប្លក់​ខ្មែរ​កំពូល​មួយ​ណែ​នាំ​ដែរ ដែល​គាត់​បង្ហាញ​ពី ​ការ​ដាក់​ប្រកាស​ពេញ​និយម​ជា​ផ្ទៃ​ពណ៌​ចម្រុះ​រាង​ស្លឹក​ឈើ នឹង​មាន​ស៊ុម​ព័ទ្ធ​ជុំវិញ​ពណ៌​ស។ នៅ​ក្នុង​ប្រព័ន្ធ​ប្លក់ករ​របស់​យើង​​ក៏​មាន​ការ​ដាក់​​ប្រកាស​ពេញ​និយម​ ស្រាប់​ដែរ គ្រាន់​តែ​ថា​ការ​ដាក់​នោះ​មាន​លក្ខណៈ​សាមញ្ញ។ ​ពេល​នេះ​ ខ្ញុំ​សូម​បង្ហាញ​ពី​របៀប​ដាក់​កូដ ធ្វើ​ឲ្យ Popular Posts gadget មាន​ផ្ទៃ​ពណ៌​ចម្រុះ រាង​បួន​ជ្រុង​​ពី​ធំ​ទៅ​តូច។ សូម​​លោក​អ្នក​អញ្ជើញ​មើល​ពី​របៀប​ដាក់​ខាង​ក្រោម​នេះ ៖

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

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

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

- ចុច​លើ​វា​ដើម្បី​កំណត់​លក្ខខណ្ឌ​​ឲ្យ Popular Posts Gadget

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

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

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

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

- សូម​ពន្លា​នៅ​ត្រង់​កូដ <b:skin>...</b:skin> (ពន្លា​ដោយ​ដាក់ Cursor ពី​លើ​អក្សរ​ចុចៗ ...)

- ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​បិទភ្ជាប់​ពី​លើ​ពាក្យ  ]]></b:skin> ​(មើលរូប​ខាង​ក្រោម)

 

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

#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:90%}
#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;line-height:1em;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:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 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;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}
#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:90%}
#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;line-height:1em;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:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 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;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}

- រួច​ចុច​ប៊ូតុង Preview ដើម្បី​មើល​សាកល្បង​សិន។ បើ​ត្រឹមត្រូវ​ហើយ ​សូម​ចុច​ប៊ូតុង Save Template ជា​ការ​ស្រេច។
- នោះ​លោក​អ្នក​នឹង​ទទួល​បាន​លទ្ធផល​ស្រដៀង​រូប​ខាង​ក្រោម​នេះ៖

លទ្ធ​ផល​ដែល​ប្លក់​ខ្ញុំ​ទទួល​បាន

*** ឃើញ​ថា​បន្ទាប់​ពី​បញ្ចូល​កូដ​រួច​ហើយ Popular Posts Gadget ប្រែ​ទៅ​ជា​មាន​ផ្ទៃ​ពណ៌​ចំរុះ​​រាង​បួន​ជ្រុង​បៀម​លេខ​នៅ​ជាប់​ខាងៗ។ :D ពិត​ជា​មិន​ពិ​បាក​ធ្វើ​ទេ! :D


អត្ថបទនេះដកស្រង់ពី៖ ប្លក់អាសត្វចម្លែក