Tạo menu theo kiểu Metro UI đơn giản cho blogspot

Like Rê chuột vào nút Like để chọn biểu tượng cảm xúc
Metro UI là một kiểu giao diện dựa trên sự sắp xếp font chữ và các mảng vuông được Microsoft phát triển. Nó bắt đầu được sử dụng để thiết kế cho windows 7 và bây giờ là Windows 10.

Thực ra Metro UI được lấy cảm hứng thiết kế từ các bảng biểu của ga tàu điện ngầm (vì vậy mới có tên Metro). Các bảng biểu này có màu sắc tương phản, font chữ lớn rõ ràng và các biểu tượng trực quan. Thực ra chúng ta đã từng gặp nó trước đây trong Windows Media Center anh em nào có sử dụng máy nghe nhạc Zune thì cũng biết Metro Ui là giao diện chính của Zune.


Microsoft rất coi trọng Metro UI, nó không phải là một phong cách mà là một triết lý thiết kế mới: đơn giản, hiện đại, thuần chất công nghệ. Nó đối chọi hoàn toàn với phong cách của Apple: tinh tế, bóng bẩy, sang trọng.

Trong bài viết này mình sẽ hướng dẫn các bạn "Tạo menu theo kiểu Metro UI đơn giản cho blogspot". Hy vọng blog của bạn có thêm 1 kiểu menu đẹp.

Tạo menu theo kiểu Metro UI đơn giản cho blogspot

Các bạn chỉ cần chèn code sau vào bất cứ nơi nào các bạn muốn nó hiển thị.
<style>
.MTMetroMenu {
  width: 960px;
  margin: auto;
}
@media screen and (max-width:960px) {
  .MTMetroMenu {
    width: 100%;
  };
}
/* MTMetroMenu */
.MTMetroMenu {
  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: &quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;
  !important;
 filter: alpha(opacity=50) !important;
 /* For IE8 and earlier */;
}
.om-ctrlitem:hover {
  opacity: 0.8;
  -ms-filter: &quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;
  !important;
 filter: alpha(opacity=80) !important;
 /* For IE8 and earlier */;
}
.om-activectrlitem {
  opacity: 1 !important;
  -ms-filter: &quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;
  !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 MTMetroMenu */
/* 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;
}
</style>
<div class='MTMetroMenu'>
<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-Ka45aKZTBUI/VQwak2rnnmI/AAAAAAAAA50/mzOvKiiPLHw/s1600/i-home.png'/>
<span class='light-text'>Homepage</span>
</a>
</div>
 
<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-vxYtWi8a5HU/VQwa1vGsarI/AAAAAAAAA58/Pp223EMQ3SE/s1600/i-messanger.png'/>
<span class='light-text'>About US</span>
</a>
</div>
 
<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://4.bp.blogspot.com/-pzzZwVdf3Fk/VQwbEGOL5eI/AAAAAAAAA6E/oXvZ4CkThYk/s1600/i-rss.png'/>
<span class='light-text'>Rss Feeds</span>
</a>
</div>
 
<div class='tile-bt-large solid-red shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-ImM68BYpVIc/VQwbQ8vIHhI/AAAAAAAAA6M/mbpnHo5bnQ0/s1600/i-search.png'/>
<span class='light-text'>Search</span>
</a>
</div>
   
<div class='tile-bt solid-darkred shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://1.bp.blogspot.com/-le0wbMumwMQ/VDDYt5jougI/AAAAAAAADQY/0VRL-XEu2Fw/s1600/mail.png'/>
<span class='light-text'>Contact US</span>
</a>
</div>
   
<div class='tile-bt solid-black shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-DfnjVRT-4Ew/VDDYtIAjVBI/AAAAAAAADQM/kOohDGbp5yA/s1600/help.png'/>
<span class='light-text'>Get HELP</span>
</a>
</div>
   
<div class='tile-bt solid-orange shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-v4PIcdfMdiY/VDDYv9fVG4I/AAAAAAAADRE/TiNcolxM2Ic/s1600/youtbe.png'/>
<span class='light-text'>YouTube</span>
</a>
</div>
   
<div class='tile-bt solid-darkblue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://1.bp.blogspot.com/-kUiJzBeUDk8/VDDYs_LeKyI/AAAAAAAADQE/pG3FwxIN-sk/s1600/face.png'/>
<span class='light-text'>Facebook</span>
</a>
</div>
   
<div class='tile-bt-large solid-blue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://2.bp.blogspot.com/-tTdt8sH2YWE/VDDYu3BXTmI/AAAAAAAADQs/2Z_FbbRCm2o/s1600/photo.png'/>
<span class='light-text'>Photos</span>
</a>
</div>
   
<div class='tile-bt solid-olive shadow-green margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://4.bp.blogspot.com/-C_MrIMJE8Ds/VDDYuZbjohI/AAAAAAAADQc/1YTbPDXrsl0/s1600/music.png'/>
<span class='light-text'>Music</span>
</a>
</div>
   
<div class='tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-2ohIIDGngGs/VDDTnUQISrI/AAAAAAAADP0/8-ZbEwAhYYE/s1600/HBT.png'/>
<span class='light-text'>NSB</span>
</a>
</div>
</div>
Lưu ý: Các bạn có thể sữa css cũng như thông tin html hiển thị theo ý muốn của các bạn. Các bạn cũng có thể thay thế các link ảnh thành link ảnh do các bạn thiết kế cũng đc. Bạn nào giỏi nữa thì kết hợp Awesome vào sẽ rất thú vị đấy.!

Đăng nhận xét

36 Nhận xét

» Hướng dẫn nhúng hình ảnh: chỉ cần sử dụng link ảnh dán vào, vd: http://domain.com/image.png
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước. Xem thêm...

  1. đẹp và chất đấy anh
    buổi chìu vui vẻ nha anh

    Trả lờiXóa
  2. Cái này chỉ hợp với mấy cái theme dạng như của Anh Phú Cường, Dân 47. Em thì thấy vậy >< còn không liên quan nhưng cái Menu này nó khá bắt mắt vả lại thêm phần nó hơi nặng, load chậm anh ạ, em đã test nhưng thấy chậm quá nên em gỡ ra.

    Trả lờiXóa
  3. @@ chỉ có css với html mà lag ư. Có tí js nào đâu mà là. ảnh thì nén siêu nhỏ mà:)

    Trả lờiXóa
  4. Màu nhìn cổ cổ, thay lại đẹp hơn

    Trả lờiXóa
  5. BLOG ANH CÓ LÚC LOAD RẤT NHANH CÓ LÚC LOAD KO XONG KO BIẾT VÌ SAO LUÔN

    Trả lờiXóa
  6. Cái menu nhìn giống cái màn hình trang chủ điện thoại lumia hồi đó nhỉ ?

    Trả lờiXóa
  7. Cái này theo kiểu của hệ điều hành Window Phone này

    Trả lờiXóa
    Trả lời
    1. Điện thoại Lumia từng làm công động điên đảo một thời đó a :D

      Xóa
  8. Trả lời
    1. vào blog a đừng cmt ít vậy nha, cmt nhiều nhiều lên góp ý chứ!

      Xóa