You chán as đơn điều hướng trang web của bạn? Có ai you want cải tiến đơn of mình like Windows 8 Metro Menu? Menu điều hướng is one of those yếu tố cốt lõi of an trang web because it does not have du khách ghé thăm web will not be able search nội phân chuyên sâu. Trọng tình huống this, one đơn xấu xí be will give strange ấn tượng do not tốt cho trang web. Vì vậy, điều cần thiết nhất is not have a menu mang phong cách thanh lịch thu hút khách. Để Blogspot of our hoàn hảo than, trong bài viết this mình xin chia sẻ with you which is Metro UI đơn

[Blogspot] - Hướng dẫn tao thanh trình đơn phong cách metro - Metro UI Menu Blogger
? METRO UI đơn là gì
If có ai was trải nghiệm giao diện of Microsoft Windows 8, or lines sản phẩm mới of điện thoại của Windows thông minh, thì METRO UI is not an điều mới mẻ as they. Đơn This is getting cảm hứng từ giao diện trình đơn of Windows 8. Nếu có ai still bối rối về it, see the hình ảnh following:

Metro UI Menu Blogger

Nơi Metro UI đơn would xuất hiện?
That depends nơi you wish to because it much linh hoạt, it may be added in any chủ đề or mẫu nào. However, it will be lý tưởng if có ai đặt đơn This above cùng trang web của mình, bằng cách làm that, du khách you can easily accessible on it but not 'đối mặt for any làm dự nào.

Làm thế nào for creating Metro đơn such as Windows 8 trong Blogger?
Các bước Neu following is lý tưởng for the blogger is users have at kiến thức về mã HTML. Hướng dẫn sau đây cực kỳ đơn giản for any ai có thể dễ dàng áp dụng us. . Làm theo hướng dẫn sau đây one cách chính xác

Bước 1: Thêm CSS stylesheet:

. -Tới Mẫu
-Chọn Edit HTML
-Bây giờ dán đoạn CSS below the ngay trên thẻ]]> </ b: skin> .Sau that, Lưu Mẫu bằng cách nhấn "Save Template" and làm bước tiếp theo.

/ * === MBL METRO UI đơn == * /
body {
 font-family: sans-serif;
}
a {
 text-decoration: none;
}
.mblmetromenu {
 width: 960px;
 margin: auto;
}
@media màn hình và ( 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;
 con trỏ: con trỏ;
 float: left;
 opacity: 0.5;
 -ms-lọc: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)" quan trọng! ;
 lọc: alpha (opacity = 50) quan trọng;! / * Đối với IE8 và trước đó * /}
.om-ctrlitem: hover {
 opacity: 0.8;
 -ms-lọc: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 80)" quan trọng;!
 Lọc: alpha (opacity = 80) !quan trọng; / * Đối với IE8 và trước đó * /}
.om-activectrlitem {
 opacity: 1 quan trọng;!
 -ms-Lọc: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)" quan trọng;!
 Lọc: alpha (opacity = 100) !quan trọng; / * Đối với IE8 và trước đó * /}
.om-controlitems {
 width: 960px;
 margin: auto;
}
.om-controlitem {
 height: 48px;
 con trỏ: con trỏ;
}
.om-closenav {
 float: left;
}
.om- MoveNext {
 float: right;
}
.om-itemholder {
 margin: auto;
 padding: 20px 0px;
}
@media màn hình và (max-width: 960px) {
 .om-closenav {
  position: absolute;
  z-index: 9999;
  trái : 0;
  top: 0;
 }
 .om-MoveNext {
  position: absolute;
  z-index: 9999;
  phải: 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 * /
/ * nÚT TILE * /
/ * Standar Buttons * /
.tile-left {
 text-align: center;
 con trỏ: con trỏ;
 width: 90px;
 height: 90px;
}
.tile-left a {
 display: block;
 padding-top : 12px;
 text-decoration: quan trọng;!
}
.tile-cuu img {
 margin: 0 auto 0 auto;
 padding-bottom: 5px;
 height: 48px;
 width: 48px;
 position: relative;
 display: block;
}
.tile- khoảng bt {
 font-size: 12px;
 padding-bottom: 10px;
 display: block;
}
.tile-left: active {
 opacity: 0.5;
}
/ * End Standard Buttons * / / * Buttons lớn * / .tile-bt- lớn {  width: 190px;  height: 90px;  line-height: 90px;  text-align: center;  con trỏ: con trỏ; } .tile-bt-lớn a {  display: block;  text-decoration: quan trọng;! } .tile- bt-lớn img {  vertical-align: middle;  margin: auto;  padding: 0px;  position: relative;  width: 48px;  height: 48px; } .tile-bt-lớn khoảng {  vertical-align: middle;  display: inline; } .tile-bt-lớn: hoạt động {  opacity: 0.5; } / * End Large Buttons * / / * Extralarge Buttons * / .tile-bt-extralarge {  text-align: center;  con trỏ: con trỏ;  width: 190px;  height : 190px; } .tile-bt-extralarge a {  display: block;  padding-top: 52px;  text-decoration: quan trọng;! } .tile-bt-extralarge img {  margin: 0 auto 0 auto;  padding-bottom: 22px ;  height: 80px;  width: 80px;  position: relative;  display: block; } .tile-bt-extralarge khoảng {  font-size: 14px;  padding-bottom: 20px;  display: block; } .tile-bt-extralarge: hoạt động {  opacity: 0.5; } / * End Extralarge Buttons * / / * END TILE nÚT * / / * DANH SHADOW * / .shadow-trắng, .shadow-đen, .shadow-xanh, .shadow-màu xanh lá cây, .shadow- màu đỏ {  / * display: inline-block; * / } .shadow-trắng: 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 xanh: 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-màu xanh lá cây: 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 đỏ: 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-đen: 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 DANH sHADOW * / / * DANH SÁCH CƠ SỞ * / / * màu sắc rắn * / .solid xanh {background: # 00BBE2; } .solid-Xanh-2 {background: # 2C84EE; } .solid-DARKBLUE {background: # 044E94; } .solid-Violetred {background: # 781.766; } .solid Đỏ {background: # E51400;} .solid-đỏ-2 {background: # E81750; } .solid Hồng {background: # FF539B; } .solid Tím {background: # D02090; } .solid Cam {background: # FB8F02; } .solid-Cam-2 {background: # FF6600; } .solid-Cam-3 {background: # DD5F37; } .solid-Hô {background: # CD5B45; } .solid Xanh {background: # 67B239; } .solid-Xanh-2 {background: # 96BF01; } .solid-Darkgreen {background: # 016C38; } .solid-Ô liu {background: # 999.900} .solid cỏ {background: # CDCD00; } .solid-Darkred {background: # 5F0000; } .solid-Vàng {background: # FEE9AE; } .solid Vàng {background: # F7D100; } .solid-Đen {background: # 000; } .solid Khói {background: # F5F5F5; } / * End rắn màu * / / * MISC * / .clearspace {clear: both; } .floatleft {Float: left; } .floatright {Float: right; } .none {Display: none quan trọng;! ! width: 0px quan trọng; } .light Văn {  color: #fff; } .dark văn {  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 (tuyến tính, trên bên trái, phía dưới bên phải, màu sắc-stop (0%, rgba (255,255,255,0)), màu sắc-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: tuyến tính gradient (-45deg, rgba (255,255,255,0) 0%, rgba (255,255,255,0.3) 100%); / * W3C * / } .margin-5 {margin: 5px; }

Bước 2: Thêm METRO đơn trong Blogger:
now it hoàn toàn phụ thuộc vị trí you meant it. Nơi lý tưởng thêm it will ngay under the title.

<! - Mblmetromenu ->
<div class = "mblmetromenu">
<div dữ liệu navid = "om-nav" class = "gạch-bt-extralarge rắn violetred margin-5 bóng đen floatleft MblMetroMenu">
<a href = "#" class = "gradient">
<img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlhlpcKyEcXfMyeIxdUYkci-RazGkYEixZg1DyGPiViH33KcVzJYn-JpUSSFBP0lT1lVtRU4eqpPkyz58kRUADldx_CW1h__F28ciME1wKckuDWBmi_BWvsK7F1p1eB3REHVVZswwDqo/s1600/home.png" alt = "" / >
<span class = "light-text"> Trang chủ </ span>
</a>
</ div> <div dữ liệu navid = "om-nav" class = "gạch-bt-lớn rắn san hô lề bóng đỏ -5 floatleft MblMetroMenu "> <a href="#" class="gradient"> <img src =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUrRT6OaoxOhFnquV1ohaXOk84eUULAF38CX6ems2YUsfvuknqvgSpVeDNCYDhx4RV-PRzfrrDOZMYalwjqbQD-JMK0opvKrIiVMkuT3JEcbRBbf94KbfByKhAAlVFJwj1JV7YD1UK7w/s1600/messanger .png "alt =" "/> <span class =" light-text "> Về Mỹ </ span> </a> </ div> <div dữ liệu navid class =" om-nav2 "=" gạch phattriencongdong rắn màu tím bóng xanh margin-5 floatleft MblMetroMenu "> <a href="#" class="gradient"> <img src =" http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/ AAAAAAAAJag / qtGW4c9kOKg / S1600 / rss.png "alt =" "/> <span class =" light-text "> RSS Feeds </ span> </a> </ div>  <div dữ liệu navid =" om-nav "class =" gạch-bt-lớn bóng đỏ rắn đỏ margin-5 floatleft MblMetroMenu "> <a href="#" class="gradient"> <img src =" http: //3.bp.blogspot. com / -PXSPYg5B3dI / UMnIKNsGLDI / AAAAAAAAJao / XWlIvLhJTAg / S1600 / search.png "alt =" "/> <span class =" light-text "> Tìm kiếm </ span> </a> </ div>  <div đĩa dữ liệu navid class = "om-nav2" = "gạch-cuu rắn darkred bóng đỏ-margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src = "http: // 2. bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png "alt =" "/> <span class =" light-text "> Liên hệ Mỹ </ span> </a> </ div > <div dữ liệu navid class = "om-nav2" = "gạch-cuu rắn màu đen bóng đen margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src = "http : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi65yVP0QTmjMh2lWMG_dWbSWRK3lDL2usPUlc-1Apwam5y7swYuv8XFwvvXpwm03Plshci-iShYQ_9gRFHM5D7tgsH8LSyZAGrhq2brbG4PQjmRzYdztyAsH36vniQohs9d2k3n-UZRsM/s1600/help.pn "alt =" "/>  <span class =" light-text "> Nhận Giúp đỡ </ span> </ a>  </ div> <div dữ liệu navid class = "om-nav2" = "gạch-cuu rắn màu cam bóng đen margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> < img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCoTpydimaxI3Awi_LKL_EwNY2khGeKnbsFxRrrmEFEz_MQSyR-uSxWuCdWZHQT0P2L9Xg3AxD71gfuR-BT2E2Z7-kUdHp2Ylge9yTw4yY1X6EQQgUoMBqAZ08Z1hSwMdW7GxLAWejx94/s1600/youtbe.png" alt = "" /> <span class = "light-text"> YouTube </ span> </a> </ div> <div dữ liệu navid class = "om-nav2" = "rắn DARKBLUE bóng xanh margin-5 floatleft MblMetroMenu gạch-left"> <a href = "#" class = " gradient "> <img src =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMb3qMvBq2M2jvwIeomn8BBb8AjD4TBzujdrUL4e8UDxytnCB6GBTtDyDbRrrwof7ClW-bUi3fJVtDKTOLTB-n3w9D6PMoSNqSEAcyluCFrijT4MM6_E0Oa_PiY8P_7klGfGC-cNzN2AU/s1600/face.png "alt =" "/> <span class =" ánh sáng văn bản " > Facebook </ span> </a> </ div> <div dữ liệu navid = "om-nav" class = "gạch-bt-lớn rắn màu xanh bóng màu xanh-margin-5 floatleft MblMetroMenu"> <a href = "#" class = "gradient"> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFhZ3VpXhNEpdGOflQFyJO1iCWmT9iqWPZJX8rWmzywBJ_y8M94kbm-Ruq8ixOyKkWUeWtAnniiSSJLgzW5MNflkl9BLUOM9cZxarskD2Yfcu8UQf7zFQxXXh1aDQBnsbfNcWqc1jLDc/s1600/photo.png" alt = "" /> <span class = "light-text"> Hình ảnh </ span> </a> </ div> <div dữ liệu navid class = "om-nav2" = "gạch-cuu rắn ôliu bóng xanh margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDqbN2QxJE41D3vTUvO12vKPpa8CRp69gsKau0EH-XCuc1XbKTj_UrNtRPaYav1-rFlauMZM00-P7mMFzFZ27D2EIpswH18NzgRLw9BNKb-6i3gwcGNfW_Mj4cJNPKyLqY7pl3BPQaHM/s1600/music.png" alt = "" / > <span class = "light-text"> nhạc </ span> </a>  </ div> <div dữ liệu navid = "om-nav" class = "gạch-bt-lớn rắn màu xanh-2 bóng tối của màu xanh margin-5 floatleft MblMetroMenu "> <a href="http://www.mybloggerlab.com" class="gradient"> <img src =" http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI /AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png "alt =" "/> <span class =" light-text "> MyBloggerLab </ span> </a> </ div>         <! - End MblMetroMenu ->   < / div> <! - END mblmetromenu ->





















 






 






 






 






 






 






 

Thật đơn giản phải không? Vâng, which is all. Đơn Metro Windows 8 trông as đơn điều hướng have been tích hợp sẵn trong trang web của bạn. Nhớ: Menu this could be used trên bất kỳ nền tảng hỗ trợ HTML or CSS tức is Blogspot, WordPress, Joomla vv ....

Nguồn:  jschanel.blogspot.com