កូដ​ (CSS) សម្រាប់​ដាក់​ដំណភ្ជាប់​នានា នៅ​ផ្នែក​ចំហៀង​នៃ​ប្លុក

   ក្នុង​ប្លុក​ខ្ញុំ បាន​ដាក់​ប្រកាស​ជា​ច្រើន​រួច​មក​ហើយ​អំពី​មីនុយ និង​មីនុយ​ទម្លាក់​បែប​ផ្សេងៗ​ជា​ច្រើន​ ដើម្បី​បំពេញ​តម្រូវការ​របស់​អ្នកស​រសេរ​ប្លុក​ទាំង​ឡាយ រួម​ទាំង​ខ្ញុំ​ផង​ដែរ។ ពេល​នេះ ក៏​មិន​មាន​អ្វី​ចម្លែក​ជាង​ពេល​មុន​ប៉ុន្មាន​ដែរ គឺ​ខ្ញុំ​នឹង​ប្រកាស​បង្ហាញ​លោក​អ្នក​នូវ​កូដ និង​របៀប​ដាក់​ដំណភ្ជាប់​នានា​នៅ​ចំហៀង​ប្លុក ហើយ​វា​ក៏​ជា​កូដ CSS ផងដែរ។ វា​មាន​ពណ៌​លឿង + និង​ពណ៌​ខ្មៅ + អក្សរ​ពណ៌​ស (លោក​អ្នក​ត្រូវ​រៀន​កែ​ពណ៌​ទាំង​នោះ​តាម​ដែល​លោក​អ្នក​ចង់​បាន ឬ​តាម​អ្វី​ដែល​សម​ជា​មួយ​នឹង​ប្លុក​របស់​លោក​អ្នក។ លោក​អ្នក​អាច​មើល​លទ្ធផល (Demo) ខាង​ក្រោម តើ​វា​មាន​រូប​រាង​យ៉ាង​ម៉េច? ឬ​អាច​សាក​ល្បង​ចុច​លេងៗ​បាន ព្រោះ​ក្រែង​មិន​ពេញ​ចិត្ត ឬ​ពេញ​ចិត្ត​អី​ស្រេច​តែ​អ្នក។ ខ្ញុំ​សូម​បញ្ជាក់​ប្រាប់​លោក​អ្នក​ម្ដង​ទៀត​ថា លោក​អ្នក​គួរ​ប្រើ​វា​នៅ​ចំហៀង​នៃ​ប្លុក​ទើប​មើល​ទៅ​សម​រម្យ ឬ​អាច​ប្រើ​នៅ​លើ វេសាយ​ ក៏​មិន​ទាស់​ត្រង់​ណា ដែរ បាន​ដូច​តែ​គ្នា​ទេ!!។... ហេស!!​ហេ!!....

មើល​សាក​ល្បង

• Web Program
• C Program
• JavaScript
• PHP
• JavaScript
• CSS
• ASP.NET

៙ របៀប​ដាក់​កូដ​ (CSS) សម្រាប់​ដាក់​ដំណភ្ជាប់​នានា នៅ​ផ្នែក​ចំហៀង​នៃ​ប្លុក ៖ 
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ហើយ​ចុច​ប៊ូតុង Save។
* បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget មិន​ចាំ​បាច់​ដាក់​​ ឬ​ដាក់​ក៏​បាន។

កូដ​ខាង​ក្រោម

<style>
/*------------Vertical menu bar Created by bestlodge.blogspot.com----------*/
#tingmoung {
margin:0px;
padding:0px;
list-style-type:none;
}
#tingmoung li a{
display:block;
width:334;
margin:0px;
padding:6px 10px 6px 10px;
text-decoration:none;
text-transform:capitalize;
background:#FF6600;
color:#333333;
-moz-transition:all .5s ease-out 25ms;
-webkit-transition:all .5s ease-out 25ms;
-o-transition:all .5s ease-out 25ms;
transition:all .5s ease-out 25ms;

}
#tingmoung li a:hover {
padding:6px 4px 6px 16px;
background:#333333;
color:#FFFFFF;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease;
}
</style>
<ul id="tingmoung">
<li><a href="#" target="_blank">Web Program</a></li>
<li><a href="#" target="_blank">C Program</a></li>
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">PHP</a></li>
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">CSS</a></li>
<li><a href="#" target="_blank">ASP.NET</a></li>
</ul>
</div>

*** សម្គាល់​ជា​សំខាន់ ៖
- លោក​អ្នក​ត្រូវ​​ផ្លាស់​ប្តូរ​ពាក្យ ៖ " Web Program, C Program," ទៅ​ជា​ពាក្យ​ដែល​លោក​អ្នក​ពេញ​ចិត្ត។
- ចំពោះ​ សញ្ញា​ទ្រុង​ជ្រូក ( # ) ជា​កន្លែង​បិទ​ភ្ជាប់ Link URL របស់​អ្នក។

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

Tweet