ដាក់មីនុយ Metro UI យ៉ាងស្រស់ស្អាតនៅក្នុងប្លុកករ

ថ្ងៃនេះ ខ្ញុំបាទ ទីងមោង មានមីនុយ ថ្មីមួយទៀតហើយ ដែលបង្ហាញលោកអ្នកដែលប្រើប្លុកករ ហើយដែលវា មានភាពងាយស្រួលក្នុងការដាក់ ដែលមីនុយប្រភេទនេះមានភាពស្រស់ស្អាត ប្លែក។ មីនុយនេះមានឈ្មោះ ជាភាសាអង់គ្លេសថា Metro UI Menu ដែលមើលទៅប្រហាក់ប្រហែលនៅក្នុងវីនដូប្រាំបី (Window8)។ ខ្ញុំនឹងបង្ហាញជូនលោកអ្នកនូវគន្លឹះ ក៏ដូចជាវិធីនៃការដាក់មីនុយប្រភេទនេះ។ ហើយសូមបញ្ជាក់ផងដែរ ថាមីនុយនេះ មានការដាក់ដូចតែមីនុយដែលខ្ញុំធ្លាប់បានបង្ហាញមុនៗដែរ គ្រាន់តែកូដខុសគ្នាប៉ុណ្ណោះ។ :D

សូមបន្តទៅមើលវិធីដាក់ខាងក្រោម ដើម្បីជាការជៀសវាងនូវកំហុសឆ្គងបាទ! :D តែដើម្បីកុំឲ្យសង្ស័យច្រើន សូមលោកអ្នកមើលគម្រូមីនុយសម្រេចដោយ [ចុចទីនេះ] សិន ព្រោះក្រែងមិនពេញចិត្ត ឬយ៉ាងណាមួយ។ សម្រាប់ខ្ញុំបាទផ្ទាល់ នៅក្នុងប្លុកខ្ញុំមុនៗ បានប្រើមីនុយនេះជំនួសក្បាលទំព័រ (Header)។ លោកអ្នកក៏អាចធ្វើដូចនេះ ដែរ ព្រោះដើម្បីកុំឲ្យពិបាកច្នៃម៉ូតក្បាលទំព័រ។

៙ របៀបដាក់មីនុយ Metro UI នៅក្នុងប្លុកករ ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)

- រកមើលស្លាក <b:skin>...</b:skin> ដោយចុចលើសញ្ញាព្រួញពណ៌ខ្មៅដែលនៅពីមុខវា

- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin> ។ (មើលឲ្យច្បាស់ពី ទីតាំងដាក់កូដ)

កូដដែលត្រូវយកទៅដាក់នៅខាងលើស្លាក ]]></b:skin>

/*===MBL METRO UI Menu==*/

body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.mblmetromenu {
width:100%;
}
}

/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute;
width:100%;
z-index:999;
display:none;
}
.om-ctrlbar {
width:100%;
height:48px;
}
.om-ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline-block;
text-align:center;
}
.om-ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px;
margin:auto;
}
.om-controlitem {
height:48px;
cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position:absolute;
z-index:9999;
left:0;
top:0;
}
.om-movenext {
position:absolute;
z-index:9999;
right:0;
top:0;
}
.om-controlitems {
width:100%;
}
.om-itemholder {
width:100%;
}
}
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px;
float:left;
display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align:center;
cursor:pointer;
width:90px;
height:90px;
}
.tile-bt a {
display:block;
padding-top:12px;
text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto;
padding-bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile-bt span {
font-size:12px;
padding-bottom:10px;
display:block;
}
.tile-bt:active {
opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
width:190px;
height:90px;
line-height:90px;
text-align:center;
cursor:pointer;
}
.tile-bt-large a {
display:block;
text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile-bt-large span {
vertical-align: middle;
display:inline;
}
.tile-bt-large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align:center;
cursor:pointer;
width:190px;
height:190px;
}
.tile-bt-extralarge a {
display:block;
padding-top:52px;
text-decoration: !important;
}
.tile-bt-extralarge img {
margin:0 auto 0 auto;
padding-bottom:22px;
height:80px;
width:80px;
position:relative;
display:block;
}
.tile-bt-extralarge span {
font-size:14px;
padding-bottom:20px;
display:block;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
box-shadow:0px 0px 6px 3px #fff;
-webkit-box-shadow:0px 0px 6px 3px #fff;
-moz-box-shadow:0px 0px 6px 3px #fff;
-o-box-shadow:0px 0px 6px 3px #fff;
-ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow:0px 0px 6px 3px #AACA37;
-webkit-box-shadow:0px 0px 6px 3px #AACA37;
-moz-box-shadow:0px 0px 6px 3px #AACA37;
-o-box-shadow:0px 0px 6px 3px #AACA37;
-ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow:0px 0px 6px 3px #E81750;
-webkit-box-shadow:0px 0px 6px 3px #E81750;
-moz-box-shadow:0px 0px 6px 3px #E81750;
-o-box-shadow:0px 0px 6px 3px #E81750;
-ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow:0px 0px 6px 3px #444;
-webkit-box-shadow:0px 0px 6px 3px #444;
-moz-box-shadow:0px 0px 6px 3px #444;
-o-box-shadow:0px 0px 6px 3px #444;
-ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

៙ ដំណាក់កាលយកមកប្រើ ៖
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)

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

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

កូដដែលត្រូវដាក់ក្នុង HTML/JavaScript

<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh74ru5RgGLXoUQFWdPH3gw6HXxxFVzdhN6chm7PPF_yYq7I1A4SXp56WPJPQYAi7zxg9Pjvklj_B5u52kCoTsH0SSY-w15nK0lUopV4AEuZTC39qw3Fhr160qtrm6ecybI9REGlJzMgBo/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_VEcfgmpm6ECnzQo0fwl6E5pouKVG10EQVYI_PlVfQgphwoU5jIbOhDLdUbrr-s6ocdYs5cvH9AWrfOpcOtsslZAYwpit69RTkTih7gATmzXOzw5APTlNF4AqCSojr9jeLLHkLDWoCU/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgnK7yX91jlwAZPjbnHuU5RkFIWeKcGmzt-Nky2VUTKW9ESGe0Vs3s-n4xqz99Yb2f1WOaR_Cs2QpV4hex7yusRxjhF2loJr10cpekXUhBXvRBHK62DQZHU56QWy9baN_dq_JkrS4N6E/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3viNrH4SJ1y_eM-fLVuX2VT_pJGYBViuChAXwHsr5BuSI8jIlCS49sXy7UjPA7qU79vZqHWTlZKzmfm_z-p1ENRz-6CiYHQifv4Vn5em9cEK25XwjjnL7vvQMH-6gl9-2glb2fU6VajA/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGUYGRf0i1SXkzBEI3ccyu0u_g4TeMps_5X6NnihSfDMF-h-pG30bT-bG7tJbbh6gYK3ZGkWiAjNK8t1snLkckBuNg_L6t_0fUH9JmjnA5c1reZAKsEdA-XrhqQTSTbxQRbT9Mr-RQ64/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgswAYpAlBP-H5VVZzzl4WVYJ3_a3kkgP8F6MdoHf6aFb-z1f7gNPIDypzFSPmLnh-b4KWZjU88JA8LTYTqI6jLCiGQ1Ecn8JCEykfLCyWN1MCQHQncdIKCcFQDN-0OrLptHq2ITh-Xoso/s1600/help.pn" alt="" />
<span class="light-text">Get HELP</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyK3ZPoReaE3JIj4sCBf-s33klk7aVbbEkgBOTjztha2QNZ3XSa-O1-50zTbV12j7WolJWV1QCHBtTgiGiCL3H8A5THuPnPxO5Y2SvVOdEXKt82qAODzIImTT40-JvoNiSlUZPc5hsxfs/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwifH9JnAFqr3Pgs6510vGKnMRk1WmMS-zdDgAKNe178PpFCdguk2_Fu2yWO8a55tvyEo8-qpsRmjFYMC6PSkjqIVgoQHG_Ih9X6oZ5VLkvrrcAgVZpRcfCjGC5eKQwcY_IXPkIKjHbY/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidssgi6KwO6QK9KsBXO1ehkWt1lt3K9QwmXw8WUZhivj9OiDr7ZdjxEPgOLpNU6m9D4AYMYKdnla5YMi0peu5sa3XUmSh30Vjm0QubVfyP_Q_Ke1lthqv3Pn55qR_KoQRQQzKZjdrYAcg/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyVfKTIIPgygcwUceqcI9ptx4BqQIVV90gCafuj9Jc9yhKHVUhoL5xI4jG1yNQmRLoWI65i_dDymsok1xUzggK4o1TwXwqYKm0wc1m1NKePptOck8vBoCltult7-JpV6EDPS-wgT6zjxA/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7h_78Jncn9WBWp1Xi79Q1dtWBfX0gTkzD8mjJ_aJXcj7RLIvqLrAdwpvNzgT42ue7NQV0ergaoy63c8Yw4i3hEhKKwv42bSvwxuhqNwnFdna4US_yN2WdnslqsQFsptyIaNaMvZHgD04/s1600/MBL.png" alt="" />
<span class="light-text">Ting Moung</span>
</a>
</div>
        
</div>

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

ដាក់​មីនុយ Metro UI យ៉ាង​ស្រស់​ស្អាត​នៅ​ក្នុង​ប្លុកករ

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

2 Responses to "ដាក់​មីនុយ Metro UI យ៉ាង​ស្រស់​ស្អាត​នៅ​ក្នុង​ប្លុកករ"

ដាក់មីនុយ Metro UI យ៉ាងស្រស់ស្អាតនៅក្នុងប្លុកករ

2 Responses to "ដាក់មីនុយ Metro UI យ៉ាងស្រស់ស្អាតនៅក្នុងប្លុកករ"