ដាក់​ Menu មាន​ពណ៌​ចម្រុះ​​ប្រាំ​ពីរ​ពណ៌

  ការ​ដាក់​ Menu ជា​ប្រភេទ​ពណ៌​ច្រើន មាន​ដូច​ជា ៖ ពណ៌​ខៀវ ប្រផេះ ក្រហម​។ល។ ប្រភេទ​ Menu នេះ​មាន​ពណ៌​ធ្លាក់​ចុះ​តិចៗ​នៅ​ពេល​យើង​ដាក់​ Mouse ពី​លើ (មិន​សូវ​រស់​រវើក​ទេ
គឺ​ស្ពឹកៗ) ដោយ​សារ​តែ​វា​មាន​លក្ខណៈ​ស្អាត និង​ប្លែក​ដែល​ធ្វើ​ឲ្យ​ប្លក​របស់​យើង​មាន​ភាព​ទាក់​ទាញ ហើយ​មើល​ទៅ​​ហាក់​ដូច​ជា​ប្លក​របស់​យើង​ប្រើ​ Template ដែល​បាន​ទាញ​យក​ពី​គេ​មក​ប្រើ​អញ្ចឹង។ ដូច​នេះ​ ដើម្បី​កុំ​​ឲ្យ​ខ្ញុំ​រ៉ាយ​រ៉ាប់​អស់​ទឹក​មាត់​ច្រើន ខ្ញុំ​សូម​ណែ​នាំ​លោក​អ្នក​ដូច​ខាង​ក្រោម​ដើម្បី​បង្ហាញ​ពី​របៀប​ដាក់។

៙ របៀប​ដាក់​ Menu មាន​ពណ៌​ចម្រុះ​​ប្រាំ​ពីរ​ពណ៌ ៖

- កត់ត្រា​ចូល (Log In) គណនី Blogger របស់​លោក​អ្នក។
- ចូល​ទៅ Template >> Edit HTML (សូម​មើល​រូប​ខាង​ក្រោម)

- រក​មើល​ស្លាក </header> ដោយ​ចុច Ctrl + F ដើម្បី​ស្វែង​រក​បាន​ឆាប់​រហ័ស។
- ចម្លង​កូដ​ខាង​ក្រោម​ យក​ទៅ​​បិទ​​ភ្ជាប់​​​ពី​លើ​ស្លាក </header> រួច​​ហើយ​អ្នក​អាច​ចុច Save template ​ជាការស្រេច ហើយ​សូម View Blog សាក​ល្បង។

កូដ Menu មាន​ពណ៌​ចម្រុះ​​ប្រាំ​ពីរ​ពណ៌

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {            
 display: inline;            
 list-style: none;            
 padding: 0;        
 }                

 #menu li a {                              
 padding: 15px 20px 15px 20px;            
 text-decoration: none;            
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;


}
 #menu li a:hover {                              

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

៙ ចំណាំ ៖ សូម​ប្តូរ​នៅ​ត្រង់​សញ្ញា​ទ្រុង​ជ្រូក ( # ) ទៅ​ជា​ដំណ​ភ្ជាប់​របស់​លោក​អ្នក។ ហើយ​ពាក្យ​ដែល​នៅ​បន្ទាប់​នោះ លោក​អ្នក​អាច​ប្តូរ​ទៅ​ជា​ពាក្យ​ដែល​លោក​អ្នក​ចង់​ដាក់។
៚ ខ្ញុំ​សង្ឃឹម​ថា​លោក​អ្នក​នឹង​អាច​យល់​បាន ព្រោះ​មិន​ពិបាក​ណាស់​ណា​​ទេ។