របៀប​ធ្វើ​ឲ្យ​ប្រកាស​ពេញ​និយម (POPULAR POST) មាន​ម៉ូត​ស្អាត​ប្លែក បែប​ទំនើប

   សួស្ដី​!!! ដោយ​សារ​តែ​ខ្ញុំ​ជាប់​រវល់​ច្រើន មិន​សូវ​បាន​សរសេរ​ប្រកាស​លើ​កូន​ប្លុក​មួយ​នេះ ព្រោះ​រវល់​ ខ្លាំង​ណាស់ គឺ​រវល់​រឿង Home Work គ្រូ ច្រើន​ពេក។ និយាយ​ដល់​សាច់​រឿង​យើង​វិញ​ម្ដង ដែល​នៅ​ថ្ងៃ​នេះ ខ្ញុំ​បាទ​នឹង បង្ហាញ​ជូន​លោក​អ្នក​នូវ​វិធី​កែ​ខៃ​ ​ប្រកាស​ពេញ​និយម (POPULAR POST) នៅ​ក្នុង​ប្លុកករ ទៅ​ជា​ម៉ូត​មួយ ប្លែក​ស្អាត បែប​ទំនើប ខុស​ពី​រូប​រាង ដែល​ប្លុកករ បាន​ឲ្យ​មក​យើង គឺ​វា​មាន​ភាព​សាមញ្ញ​ពេក ដូច​នេះ​យើង​ត្រូវ​តែ​កែ​ប្រែ​វា​ចេញ។ :D

   ងាក​មក​មើល​អំពី​របៀប​ដាក់​វិញ ក៏​មិន​ពិបាក​ឆ្អី​ដែរ ច្រួល​ណាស់ :D បើ​អ្នក​ធ្លាប់​ចេះ​ដាក់​វា គឺ​អាច​ដាក់​បាន​ហើយ។ ខ្ញុំ​ក៏​សូម​ទោស​ផង​ដែរ ដែល​មិន​អាច​ដាក់ Demo មើល​លទ្ធផល​ជាក់​ស្ដែង​ឲ្យ​មើល  តែ​មាន​រូប​ជា​ឧទាហរណ៍​ដែរ សូម​មើល :

៙ ទី​មួយ​ត្រូវ​ដាក់ 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> ​។ (មើល​ឲ្យ​ច្បាស់​ពី ទី​តាំង​ដាក់​កូដ)

កូដ​ដែល​ត្រូវ​យក​ទៅ​ដាក់​នៅ​ខាង​លើ​ស្លាក ]]></b:skin>

/* Popular Posts Widget tingmoung.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

- បន្ទាប់​មក ស្វែង​រក​កូដ </body> (សូម​ចុច Ctrl + F ទើប​ងាយ​រក)។
- ពេល​រក​ឃើញ​ហើយ សូម​បិទភ្ជាប់ (Past) កូដ​ខាង​ក្រោម​នៅ​ពី​លើ </body> (មើល​រូប)

កូដ​ដែល​ត្រូវ​យក​ទៅ​ដាក់​នៅ​ខាង​លើ​ស្លាក </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

 

- ពេល​ដាក់​កូដ​រួច​រាល់​អស់​ហើយ សូម​ចុច ប៊ូតុង Save Template ជា​ការ​ស្រេច។

*** អរគុណ ចំពោះ​ការ​តាម​ដាន​ទស្សនា​របស់​លោក​អ្នក។ ជួប​គ្នា​នៅ​ពេល​ក្រោយ​ទៀត។ :D

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

Tweet