Ads Area

របៀបដាក់ Menu style Metro


Menu bar

  1. សូមចូលទៅកាន់ គណនីលោកអ្នក ( blogger.com)
  2. បន្ទាប់មកចូលទៅកាន់ Template -> Edit HTML.
  3. សូមស្វែងរកកូដ ]]></b:skin> (ដោយចុច Ctrl + F )
  4. សូម Copy កូដខាងក្រោមទៅដាក់ពីលើ កូដនោះ
 /*===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; }

6. រួច Save Template ។
7. ចូល​ទៅ Layout រួច​ចុច Add a Gadget ។
8. - រមូល​​ចុះ (Scroll) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​លើ​វា​ដើម្បី​បើក
9. copy កូដខាងក្រោមទៅដាក់ក្នុងនោះ
 <!-- dcmetromenu -->  
 <div class="dcmetromenu">  
 <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft DCMetroMenu">  
 <a href="http://www.tipsntricks4fun.in/2013/01/blogger-window-8-look-metro-menu-bar.html" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6FRfBOtSqnu8P_k3vab6rTPbltmQW078aMoxq5D6ficHgYuuf0DqvV5upI4yzWs7Ep0yWVb8SdqvxOxeBk4hsVjB02Wbg50rbrgKRSqqndWi4YCsTB9mAWkY9GDuTAfMuEC1BFLcPG8/s1600/home-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO1ZFE2pbpyW3zZV0roARx1ciU-v3K50X7ypgaUqKcyWvDjbuCvj0Bg4d2Mrpoi3hcdJvrND_eDln4xDymcc6HfsQR-mDU8-TWE8u7yDnP1YjMPOD6jot_0DnCRQXijTjOmDQwFDR6yk/s1600/messanger-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKS_qa9q4yaqpaRnUeCT7e3rT6firKk30ADIoMXfFwjp5j1vHPYh7v8f1fTH5EOtjrjEaQWVNgcwq3zC9my-rolpbq_dIQxgCuy4-8vvD1BcyeI8Klpy4k-bnB-V5rCwIU4s6NiSMZ8wc/s1600/rss-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_32d8x5OM_mvxEoY0fAoNmz_TYd8UVu9-3TCSK71DrDdZSYXGAeotpSgeg8GjUmpVCj3nSoaebQCo5wuaeKcshKH93PmLQtOeM0qm4nPxn_fdDLJk6JDwg0mnF2a5aSvCK592V0vTVWQ/s1600/search-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObQ-qs9-1P3jsSkHV_HquASyLy8RhFQ3Wae6ZXzYjR7Ttt1CZtLRk98NJt_sShZdbh_Lk0VkMPIujoTCIWhOlQQA_KYTM-jcOEFuDGgkR7hTyviE7wXvtIh3_ddEgI-jonce5miasvGc/s1600/mail-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimu__32KPhMTIumX4TK5WFLAlHYnVcLJPHl2-Th_i8Ip7mYfHmDH4hWRFF9TzvIEKOu9Ogcp-5cWr0zXP4F-oYIZQl8QHUpwJ_21b9dAohHYMmV21iUD6dlnx8yC5oqFthOPwe3CXcxLQ/s1600/help-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRcTWk0dPNvbrfEVCIzoNUt7PMIerz7Hv1R3OnQXYHJsr2LbUMppdALEGVeCooXgZBaO9svcpb3m5_QwEamFUOoDXTPFtyzw0YfFiBG7qJ8ZyZL_Blg7AbnBGXTgcQC8qQIRZY2tMhPDs/s1600/youtbe-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxs3jtImHSaT62NFdPzn2QB3KQBZRBhVyBnZ9vsMQKeFvT54GLz8Bx52slLxlLryKadrOwY3K18tUsY4hcVCg0jd3MOHpJ0rd2lL6L1lrGuQtPK-yrFFEfICtOgvFyhSWedkgcu2Bt_c/s1600/face-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTPoDnxa9kMtFbptKxrNXYOa4IaTpgFK0YMiEiSn59s_dXCtEazrb_sgdv_q1OKYIQ44rsEaEu5nAFGXT230AaGOf8L6N3D5Tca-rAGylOgBRUWM83m6y_dOYt_zr3yat8vSNm0bSbpo/s1600/photo-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="#" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsfCFOB0A6uCQwKpxVkvwpxQsbs6cQEdeO4nqEfcsBBCKJE0LgEXRJJm6JiyRygxTlFPSquudCO_WYpHk37I1mVdne1GNfJp7IAR4s-vyXTY-xFNUGCGfvGe08bVNY0_WqH2SgHWAwymA/s1600/music-TNT4F-Tipsntricks4fun.in.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 DCMetroMenu">  
 <a href="http://www.tipsntricks4fun.in/2013/01/blogger-window-8-look-metro-menu-bar.html" class="gradient">  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxTFugrRhReK-qCcJe539exTKKOIHclVpFmHHm5zk0naSRHHVf4Edqz3UQsbdjm_Uq-uLCJ5R9Q_eSBXfUMWxG-Pv9Vo8p-Tz3ffGF9dq4lK2xYrQ0qB1gdAkffxFHokS8vjnlAagt8I/s1600/TNT4F-Tipsntricks4fun.in.png" alt="" />  
 <span class="light-text">Tips And Tricks</span>  
 </a>  
 </div>  
     <!-- End DCMetroMenu -->  
  </div>  
 <!-- END dcmetromenu -->

10. សូម save ជាការស្រេច ។
* ចំណាំ : ចំពោះកូដដាក់ Widget នេះលោកអ្នកអាចដាក់នៅទីតាំងណាមួយធំ ឬសមរម្យ ។ :D
Tags

You may like these posts

Show more

Top Post Ad

Below Post Ad