ដាក់​​ចំណាត់​ក្រុម​​រាង​ស្លឹក​ឈើ​ ពណ៌​ត្រួយ​ចេក

   សួស្តី​បាទ! ថ្ងៃ​នេះ​ខ្ញុំសូម​ណែ​នាំ​លោក​អ្នក​នូវ​វិធី​សាស្ត្រ​ថ្មី​​មួយ​ទៀត​ហើយ​​ក្នុង​ការ​​ដាក់​ស្តាយ ​ទៅ​លើ​ចំណាត់​ក្រុម។ កាល​ពី​អត្ថ​បទ​មុន​ខ្ញុំ​ធ្លាប់​បង្ហាញ​លោក​អ្នក​រួច​មក​ហើយ នូវ របៀប​លេង​ស្តាយ​ចំណាត់​ក្រុម​ពណ៌​ស្លា​ទុំ​ជា​មួយ​នឹង CSS3។ ពេល​នេះ​ក៏​មិន​ខុស​ពី​អត្ថបទ​នោះ​ដែរ ដោយ​ការ​លេង​ស្តាយ​ចំណាត់​ក្រុម​នេះ គឺ​មាន​លក្ខណៈ​រាង​ជា​ស្លឹក​ឈើ ពេល​ដាក់​ Mouse ពី​លើ​មាន​ពណ៌​ដូច​ស្វាយ​ទុំ ហើយ​បើ​លោក​អ្នក​មិន​ស្គាល់​ស្វាយ​ទុំ​នោះ ក៏​ខ្ញុំ​មិន​ដឹង​ថា​ត្រូវ​ប្រាប់​យ៉ាង​ណា​ឲ្យ​យល់​នោះ​ទេ។ :D ការ​លេង​ស្តាយ​ចំណាត់​ក្រុម​នេះ​ជួយ​ប្លក​របស់​លោក​អ្នក​ឲ្យ​មាន​ភាព​ស្រស់​ ឆើត​ឆាយ​គេ​មើល​ហើយ​មិន​ណាយ​ចិត្ត​ចង់​ចាក​ចេញ​ផង​ដែរ​បាទ! ហើយ​រឹត​តែ​សំខាន់​ជា​នេះ​ទៅ​ទៀត​នោះ លោក​អ្នក​ដែល​ជា​ម្ចាស់​ប្លក​ត្រូវ​ចេះ​សាក​ល្បង​សិក្សា​ស្វែង​យល់​កែ​កូដ​ ដែល​ខ្ញុំ​ឲ្យ​ស្រាប់​ទៅ​​ជា​កូដ​ផ្សេង​ទៀត​ដើម្បី​បង្ហាញ​ម៉ូត​ប្លែក​ថ្មី​ ជាង​នេះ​ទៀត។ ការ​កែ​កូដ​នេះ​ខ្ញុំ​សង្ឃឹមថា អ្នក​មិន​រៀន​កូដ​ក៏​អាច​សាក​ល្បង​កែ​បាន​ដែរ។

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

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

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

   ៙ Title : ជា​ឈ្មោះ Labels (អ្នក​អាច​ដាក់​ថា ចំណាត់​ក្រុម ឬ​អ្វី​ផ្សេង​គ្មាន​បញ្ហា)
   ៙ Show : បើ​អ្នក​ធីក​នៅ​លើ All Labels នោះ​នឹង​បង្ហាញ​ចំណាត់​ក្រុម​ទាំង​អស់។
   ៙ Sorting : ត្រូវ​ធីក​លើ By Frequency។
   ៙ Display : ត្រូវ​ធីក​លើ​ចំណាត់​ក្រុម​ពពក Cloud។
   ៙ Show number of posts per label : មិន​ចាំ​បាច់​ធីក​ទេ។
- ពេល​លោក​អ្នក​កំណត់​រួច​រាល់​ហើយ​សូម​ចុច​ពាក្យ​ថា Save។

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

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

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

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

កូដ​​ចំណាត់​ក្រុម​​រាង​ស្លឹក​ឈើ​ ពណ៌​ត្រួយ​ចេក

.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
 color:#fff;
 text-decoration:none;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all  .5s ease-in-out;
 }
.label-size a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

៙សូម​ជូន​ពរ​លោក​អ្នក​ឲ្យ​ជោគ​ជ័យ​រាល់​ការ​ធ្វើ​តាម​គន្លឹះ​នានា​ក្នុង​អត្ថបទ​ប្លក​របស់​ខ្ញុំ។ :D



ប្រភពពី ៖ អាយធីក្រៅសាលា