របៀប​លេង​ស្តាយ​ចំណាត់​ក្រុម​ពណ៌​ស្លា​ទុំ​ជា​មួយ​នឹង CSS3

 ការ​ដាក់​បង្ហាញ​ចំណាត់​ក្រុម​ Blogger គឺ​មាន​មុខ​ងារ​ស្រាប់​ទៅ​ហើយ​ ប៉ុន្តែ​មិន​អាច​បំពេញ​នូវ​ចំណូល​ចិត្ត​អ្នក​​ទស្សនា​បាន​ឡើយ។ ដូច​នេះ​ខ្ញុំ​សូម​ណែ​នាំ​លោក​អ្នក​ពី​របៀប​ដាក់​ស្តាយ Labels ពណ៌​អាចម៍​​ដែល​មាន​លក្ខណៈ​ដូច​ដំដែក​គោល​ព្យួរ​នៅ​ជាប់​នឹង​ជញ្ជាំង។ ដូច​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ជូន​លោក​អ្នក​នូវ​របៀប​ដាក់​ទាំង​ពីរ​ជំហាន​ដែល​មាន​លក្ខណៈ​ជាប់​ទាក់​ទង​គ្នា​ ដើម្បី​ឲ្យ​បង​ប្អូន​ជន​ជាតិ​ខ្មែរ​យើង​ដែល​មិន​ទាន់​បាន​យល់​ដឹង​អាច​យល់​បាន​​និង​ធ្វើ​បាន។ :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 {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}