គន្លឹះដាក់ មីនុយ (Menu) នៅផ្នែកខាងលើនៃក្បាលទំព័រ ក្នុងប្លុក
ទីងមោងៗ តើយើងអាចដាក់ មីនុយ (Menu) នៅខាងលើ ក្បាលទំព័រ (Header) បានដូចម្តេច? នេះជាសម្លេងដែលគេបានសួរខ្ញុំ និងជាសម្លេងដែលខ្ញុំបានសួរខ្លួនឯង។ ដូចនេះ ខ្ញុំសូមបកស្រាយបង្ហាញពីរបៀបដាក់មីនុយ នៅផ្នែកខាងលើនៃប្លុករបស់យើង។ នៅក្នុង ស្បែកប្លុកដែលមានស្រាប់របស់ប្លុកករគ្មានមុខងារនៃទេ ដូចនៃ វាអាស្រ័យទៅលើការចេះបន្ថែម និងចេះអំពីរបៀបដាក់កូដរបស់យើង។ សូមលោកអ្នកមើលអត្ថបទគម្រូខាងក្រោមរបស់ខ្ញុំបាទ!។
ការដាក់មីនុយ នៅខាងលើក្បាលទំព័រនេះ មិនមែនជាការដាក់មីនុយ ធម្មតាដែលលោកអ្នកគ្រាន់តែដាក់តាម CSS ហើយមកចាប់ Style នៅលើ HTML នោះទេ គឺវាមានលក្ខណៈច្បាស់លាស់ជាង។ :D ហេស!!ហេ!!... ដូចនេះ ដើម្បីស្រាយចម្ងល់របស់លោកអ្នក ក៏ដូចជាកត់ត្រាទុកនូវគន្លឹះនេះ សម្រាប់ខ្ញុំនៅពេលក្រោយ ខ្ញុំសូមបង្ហាញគន្លឹះនេះ។
៙ ដាក់ មីនុយ (Menu) នៅផ្នែកខាងលើនៃក្បាលទំព័រ ក្នុងប្លុក ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា
- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin> ។ (មើលឲ្យច្បាស់ពី ទីតាំងដាក់កូដ)
- បន្តពីនោះមក លោកអ្នកត្រូវស្វែងរកកូដ ៖
- ពេលដែលរកកូដនោះឃើញហើយ សូមធ្វើការបិទភ្ជាប់នូវកូដមីនុយខាងក្រោម (មើលរូប) ៖
*** សម្គាល់ជាសំខាន់ ៖
- លោកអ្នកត្រូវផ្លាស់ប្តូរពាក្យ ៖ " Home, About,...." ទៅជាពាក្យដែលលោកអ្នកពេញចិត្ត។
- ចំពោះ សញ្ញាទ្រុងជ្រូក ( # ) ជាកន្លែងបិទភ្ជាប់ Link URL របស់អ្នក។
* ជាចុងក្រោយអ្នកនឹងបានលទ្ធផលដូចខ្ញុំបាទ។ :D
ការដាក់មីនុយ នៅខាងលើក្បាលទំព័រនេះ មិនមែនជាការដាក់មីនុយ ធម្មតាដែលលោកអ្នកគ្រាន់តែដាក់តាម CSS ហើយមកចាប់ Style នៅលើ HTML នោះទេ គឺវាមានលក្ខណៈច្បាស់លាស់ជាង។ :D ហេស!!ហេ!!... ដូចនេះ ដើម្បីស្រាយចម្ងល់របស់លោកអ្នក ក៏ដូចជាកត់ត្រាទុកនូវគន្លឹះនេះ សម្រាប់ខ្ញុំនៅពេលក្រោយ ខ្ញុំសូមបង្ហាញគន្លឹះនេះ។
៙ ដាក់ មីនុយ (Menu) នៅផ្នែកខាងលើនៃក្បាលទំព័រ ក្នុងប្លុក ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា
- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin> ។ (មើលឲ្យច្បាស់ពី ទីតាំងដាក់កូដ)
កូដដែលត្រូវយកទៅដាក់នៅខាងលើស្លាក ]]></b:skin>
.shadowblockmenu ul{
border: 2px solid #FF8900
border-width: 0px 0; /* Show only top and bottom border for main menu container */
padding: 5px;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: white;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 0px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
border: 2px solid #FF8900
border-width: 0px 0; /* Show only top and bottom border for main menu container */
padding: 5px;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: white;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 0px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
- បន្តពីនោះមក លោកអ្នកត្រូវស្វែងរកកូដ ៖
div class='fauxborder-left header-fauxborder-left'>
- ពេលដែលរកកូដនោះឃើញហើយ សូមធ្វើការបិទភ្ជាប់នូវកូដមីនុយខាងក្រោម (មើលរូប) ៖
កូដដែលត្រូវយកទៅបិទភ្ជាប់
<div class='shadowblockmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>
*** សម្គាល់ជាសំខាន់ ៖
- លោកអ្នកត្រូវផ្លាស់ប្តូរពាក្យ ៖ " Home, About,...." ទៅជាពាក្យដែលលោកអ្នកពេញចិត្ត។
- ចំពោះ សញ្ញាទ្រុងជ្រូក ( # ) ជាកន្លែងបិទភ្ជាប់ Link URL របស់អ្នក។
* ជាចុងក្រោយអ្នកនឹងបានលទ្ធផលដូចខ្ញុំបាទ។ :D





