[Blogspot] - Hướng dẫn tao thanh menu phong cách metro - Metro UI Navigation Menu Blogger
Bạn có chán với menu điều hướng trang web của bạn? Có ai muốn cải tiến menu của mình như Windows 8 Metro Menu? Navigation menu là một trong những yếu tố cốt lõi của một trang web bởi vì không có nó du khách ghé thăm web sẽ không thể tìm kiếm nội dung chuyên sâu. Trong tình huống này, một Menu xấu xí có thể sẽ gây ấn tượng không tốt cho trang web. Vì vậy, điều cần thiết nhất là phải có một Menu mang phong cách thanh lịch thu hút khách. Để Blogspot của chúng ta hoàn hảo hơn, trong bài viết này mình xin chia sẻ với các bạn đó là Metro UI Menu[Blogspot] - Hướng dẫn tao thanh menu phong cách metro - Metro UI Navigation Menu Blogger
METRO UI Menu là gì?
Nếu có ai đã trải nghiệm giao diện của Microsoft Windows 8, hoặc các dòng sản phẩm mới của điện thoại Windows thông minh, thì METRO UI không phải là một điều mới mẻ với họ. Menu này được lấy cảm hứng từ giao diện menu của Windows 8. Nếu có ai vẫn còn bối rối về nó, hãy xem các hình ảnh dưới đây:
 |
| Metro UI Navigation Menu Blogger |
Nó phụ thuộc nơi bạn muốn bởi vì nó rất linh hoạt, nó có thể được thêm vào bất kỳ chủ đề hoặc template nào. Tuy nhiên, nó sẽ là lý tưởng nếu có ai đặt menu này ở trên cùng trang web của mình, bằng cách làm đó, du khách có thể dễ dàng truy cập vào nó mà không phải đối mặt với bất kỳ do dự nào.
Làm thế nào để tạo Metro Menu như Windows 8 trong Blogger?
Các bước nêu dưới đây là lý tưởng cho những blogger là những người có ít kiến thức về mã HTML. Hướng dẫn sau đây cực kỳ đơn giản để bất cứ ai có thể dễ dàng áp dụng chúng. Làm theo hướng dẫn sau đây một 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 bên dưới ngay trên thẻ ]]></b:skin> .Sau đó, Lưu Mẫu bằng cách nhấn "Save Template" và làm bước tiếp theo.
/*===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; }
Bước 2: Thêm METRO Menu trong Blogger:
Bây giờ nó hoàn toàn phụ thuộc vị trí bạn muốn đặt nó. Nơi lý tưởng thêm nó sẽ ngay dưới tiêu đề.
<!-- mblmetromenu -->Thật đơn giản phải không? Vâng, đó là tất cả. Menu Metro Windows 8 trông giống như menu điều hướng đã được tích hợp sẵn trong trang web của bạn. Nhớ: Menu này có thể được sử dụng trên bất kỳ nền tảng hỗ trợ HTML hoặc CSS tức là Blogspot, WordPress, Joomla vv....
<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/AVvXsEgHshZbmZl_997-nKyXVHDjaF5KbtfYsTUoBMggKK6y-nS9QgNvq7cKK6JlWPJ8JgCS9f4ahuO9Dg8skJlj_D7ft4ykAbncJ978z-ek94s0GSPsVWa-ZGhWHKbCSutXV08TDJeXNmuAp04/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/AVvXsEhHh_B0adBXIf4FY8a-QxJvZqdcR7RAVgYcPTBXn0qpdkzAqIzorSZnGFSQRyyAtLZNF-vGbVDjeY6EVR-BMJ0U7ZN1QYY57NBLW1cxyHbNai5qrBZOqWnITMHSgiULeQPdZAna-rIfp0A/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/AVvXsEgdJuUe4i9wkHoGH7iPNLce4NrKh460e2-jeR564UKa7nSs2Q7O1gZUguHLZ3y6xtEfZS5B9ANkj1iEs-0T_w2H7Asf_cPlJciz4GGXBwxipvsjbM8Ah6rL_S3OFwvjvm3MjtFQzglMkfE/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/AVvXsEh-1__K3uYd16RKIuCBkq_KfPZFQQ8QCmKHM4yTzJmkILzzhzXKvjIq_S2aQFDYhyphenhypheni5XyUfE5LrGgQAREfJuygRikRBXeZ3hA1W2bdwYZYIKmjtkbh93JIIUf4RK5jkxIq7X9zNvpkMfKU/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/AVvXsEit4GRBkachzjirgfBOfg8yaunZTR4k3n4_qbykOIF-ec-X1yDwdFnRVLfFpZKHXNuJsKpkFTEJj_gw8iUzcJ9ExBQBqJ5IYZdoz5g-pjCHKJfCbeDxV5BHKgJ9Gv9GoxUM-rmU2aESfFY/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/AVvXsEhIr5pzN2oohf6k_Y2Uv7xoH3c5G8Pp7uA62JFdwVhX6X6VbRN_3IilIYCT-lU5CU5R6DwJO_0v4gNpXx5eyYsL2ZKrHSnt2r0A1MR406_cUWGVy__wpsOtUtXbavMtmHkU2hSNb2YgiUk/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/AVvXsEhPykyh3rLmNlzW8YnyJaJEMf7xylYTd9VxP0s15OwG4n21rUmbcJwyzH6KGN4e9unYjJBhhjlFzc8L9t2bUQ70ViSmYwPBf6JNqfic-23qSBvFef9Slk55B0y3aAAflS5WaT8cvCDxTdI/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/AVvXsEj6s07VcxT8X4bbRH0l0sPRmWi3C-zQq1rscR-rWh_89M44S2gJDxLaiLC0xKGQJzzerGQtiIqUAqXbdvWQ8bW4UwI5mJN-D7_tdE8g6o3_q1lo0PE3r87ygobcCZJEQlsopngN_EYcX7Y/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/AVvXsEh1oGUsi0AJ0zaDFCgN8aM0AntUrfmuzcX1nUbNLLS9g_dtv_BYFXzDoV4bLlsIBB2pny3dTYImRxg1HKA3iOJrCWRRbenvEvAFQk9jVW9BY_5zaHJP260VM9Ro0xuazfFFzNn697s9160/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/AVvXsEh5A_QG7XTpaZDD6L2ZTSjgt9soXUPJXU1Gmk0blYXak5kmPVTFt0g8rGnZPhyphenhyphen0pDXKBHEvOripogICt-Dy00okGj2QtkCtpTL9-Q8wvN36j6ge679KHv4kGZeH7VUTEW0xagqLfv_R0-k/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="http://www.mybloggerlab.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUziny83QRwfSiysNfubWr_aRX9Ujb43Gezv5BiHlIatk9VrG6yziL-bRr5OJrvOaL4UAQRcH7GekB1aqHCtz5ngDj-e5N8GMtKuEK76xTXtNOXRpkuR9fZJ45N-T1f0RF4GiNnvzLEk/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
Nguồn: jschanel.blogspot.com
![[Template] - Movey Responsive Blogger Template Download](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisrDMu9l1UXWy06yU2S2bsn8AaVmhjA9PqHKVZ27ICbcFZYb5ZsrWsSb1tL2tb8AfCr7qOr-f2-5siS3gLuMm7M4mWKP_dJNLgMqCD5Qz26PvsKMaLGtnfpCCwDI5E9Ce0w2YXYWVqIwG5/w72-h72-p-k-no-nu/movey+image+bthemez.png)
![[Blogspot] - Hướng dẫn sao lưu blogspot đơn giản!](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmmHBChUGRd7WgxkGeoX-B4Mw4YfhfbTgQ1i-rBo-OMy6jzFLoxlVmPH-bepFBqZTFJucdj3r8sLQYpIPkLg7tibRKHH9QfraSpAxpGrvtmbihF1vYqMNkPoI0huI02levcBVFG2sBdA/w72-h72-p-k-no-nu/sao+l%25C6%25B0u+template.png)
![[Download] - TẢI ITUNES PHIÊN BẢN MỚI NHẤT (CẬP NHẬT LIÊN TỤC)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9qp5-jri_z48Bd_lvuN-8T-abp8C2_rUrI9CP5g4IRN4h6OU96_cgd83yzsYSgVJCtqJrsgGrhOcJohFZPcLE6PfcxNx_nrJvGdJu_c6AMIabrHzW5vkwamkfEB718zjHyNZl80ye8Yg/w72-h72-p-k-no-nu/itunes.jpg)
![[Template] - Sora Fast Loading Blogger Template loading fastest - đẹp, nhẹ và tải trang cực nhanh](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIBEKuT86FG0lUiTnOiAxgBYzEWlboPjbvLDhS5LvL0euDiEfnsAkyj8HLL6bKjJXbU3qI5Qu2e489t1WFaUuE8yQoX5eOP9UF2u_2y-KuvYnjwuN_MJI4ob3y9VZaKUxZT5o1kdspLdJ/w72-h72-p-k-no-nu/sora-fast-blogger-theme-free-premium.png)
![[Thủ thuật] - Hướng dẫn bật "nút ruồi" - Menu hỗ trợ nhanh trên dòng điện thoại Samsung](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2sezDx93BKJori1d6KPaJJWjty_-ZtPNcD1dgxVjwIEAktn46DhF6G0i3-EfHVGb_htya6x5NnE6JgOMxf1IzRhP3INBjzh6PekI2CF38DwDbCm_Vu8TLUvajAQb2LP1v_8Ii-hmcjGA/w72-h72-p-k-no-nu/Screenshot_20200508-105750_One+UI+Home.jpg)
![[Thủ Thuật] - Hướng dẫn tạo mật khẩu màn hình và Vân tay Samsung Note 10](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1lhOJ7O4Nw4dhbj3dtPUA4_l-ifezPi-0cXepbCSCaENIjwhACTbi-sSaw8tUfXUcznnc-TRhZpf0sHbno7D8kHZxznt0b07S9MtLgO_0R56voJKFjeMw0QarVQJE-a7-c4GdhDNk2wU/w72-h72-p-k-no-nu/1593312114851939-0.png)
![[Thủ Thuật] - Cách quay màn hình Samsung Note 10+](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CgtdUWFIzR_BKGqBZ2_t373iY5gwgZqCZR73m3hKgKW95zakN6v6idI4yK7WUwZ9hpD-VcJ95g2P1zWfCRAL-G3rlVY3ENpcuzYkMrIkUgizqMkyDN1NltZ_P3A7Hq_AHT5KyFeQ0QvK/w72-h72-p-k-no-nu/Screenshot_20200507-223650_One+UI+Home.jpg)
Không có nhận xét nào:
Đăng nhận xét