ចែករំលែកលទ្ធផលការងារសម្រាប់ថ្ងៃនេះ

នៅក្នុងមេរៀនខ្ញុំសូមបង្ហាញអ្នកអំពីការបង្កើត កូន​មីនុយ​ផ្តេក​មួយ​មាន​ពីរ​កូឡោន ។ ពិត​ជា​មាន​ភាព​ទាក់​ទាញ និងស្រស់​ស្អាត​យ៉ាង​ខ្លាំង នៅ​ពេល​ដែល​យើង​បាន​បង្កើត មីនុយ​ដែល​មាន កូន​មីនុយ​រាង្គ​បែប​នេះ ដែល​វា​បង្កើត​ឡើង​ដោយ​ប្រើ​កូដ CSS ដោយ​មិន​ចាំបាច់​មាន​លាយ​ជា​មួយ​នឹង script ឡើយ។ គុណ​សម្បត្តិ​របស់ ការ​បង្កើត​មីនុយ​រាង្គ​បែប​នេះ គឺ​វា​មិន​ធ្វើ​អោយ កូន​មីនុយ​របស់​យើង វែង​ពេក​នោះ​ទេ ទោះ​បី​ជា​មាន កូន​ក្រុម​ច្រើន​យ៉ាង​ណា​ក៏​ដោយ។

blogger navigation menu, css menu, drop-down menu

សូមមើលពីរបៀបបង្កើត ដូចខាងក្រោម៖
ជំហានទី 1: ចូលទៅកាន់ ប្លុករបស់អ្នក បន្ទាប់មកចូលទៅកាន់ “Layout

  • សូមចុច “Add a Gadget” នៅខាងក្រោម រូបភាព header របស់ប្លុក
  • ជ្រើសរើសយក  “HTML/JavaScript” ។

ជំហានទី 2: ចម្លង កូដខាងក្រោម ទៅដាក់នៅក្នុង Gadget ដែលទើបនឹងបន្ថែមមុននេះ ។ សូមចំនាំ៖ មិនចាំបាច់ ដាក់ Title អោយវានោះទេ។

<div id=’menucol’>
<div id=’topwrapper’>
<ul id=’top’>
<li><a href=’http://YOUR URL HERE.com’>Tab 1 Title Here</a></li>
<li><a href=’http://YOUR URL HERE.com’>Tab 2 Title Here</a></li>
<li><a class=’submenucol’ href=’#‘>Tab 3 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.1</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.2</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.3</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.4</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.5</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class=’submenucol’ href=’#‘>Tab 4 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.1</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.2</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.3</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.4</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.5</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class=’submenucol’ href=’#‘>Tab 5 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.1</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.2</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.3</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.4</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.5</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.6</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.7</a></li>
<li><a href=’http://YOUR URL HERE.com’>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href=’http://YOUR URL HERE.com’>Tab 6 Title Here</a></li>

</ul>
<br class=’clearit’/>
</div>
</div>

ធ្វើការផ្លាស់ប្តូរ ឃ្លានេះ http://YOUR URL HERE.com  ទៅជា តំណភ្ជាប់ របស់អ្នកវិញ។
ជំហានទី 3:  ពេលនេះចាប់ផ្តើម បន្ថែម Style ទៅអោយកូដខាងលើ ។

  • ចូលទៅកាន់ Template > Edit HTML
  • ចុច Ctrl+F ដើម្បីស្វែងរកឃ្លា <b:skin>…</b:skin>  បន្ទាប់មកសូមចុចនៅចំកណ្តាលវាដើម្បីពន្លា style កូដ។

 

  • បន្ទាប់មក ចុច CTRL + F ម្តងទៀតដើម្បីស្វែងរកឃ្លា   ]]></b:skin>  រកឃើញហើយ ធ្វើការចម្លង និងបញ្ចេញកូដខាងក្រោមនេះ ពីលើ ]]></b:skin> ជាការស្រេច។

/* Horizontal menu with 2 columns
———————————————– */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

  • សូមប្រើ Ctrl+F ម្តងទៀតដើម្បីស្វែងរក ឃ្លាខាងក្រោមនេះ

/* Tabs

———————————————– */

  • ធ្វើការលុប កូដដែលនៅខាង ក្រោម /*Tabs រហូតដល់ ឃ្លាខាងក្រោមនេះ (សូមមើលរូបខាងក្រោម)

/* Columns
———————————————– */

  • បន្ទាប់មកចម្លង កូដខាងក្រោមនេះ ទៅដាក់ជំនួសកូដ ដែលអ្នកទើបនឹងលុបមុននេះវិញ

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

menu for blogger, blogger gadgets, blogger widgets

ជំហានទី 4: ធ្វើការរក្សាទុក។ សូមសំណាងល្អ!😛