July 8, 2015

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 phone 7 và bây giờ là Windows 8.

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 Phong Cách Metro UI Cho Blogger”. Hy Vọng website của bạn có thêm 1 kiểu menu đẹp.

Sau đây là các bước thực hiện:

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ ]]>< /b:skin >

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

.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: &amp;amp;amp;quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=50)&amp;amp;amp;quot;
  !important;
 filter: alpha(opacity=50) !important;
 /* For IE8 and earlier */;
}

.om-ctrlitem:hover {
  opacity: 0.8;
  -ms-filter: &amp;amp;amp;quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=80)&amp;amp;amp;quot;
  !important;
 filter: alpha(opacity=80) !important;
 /* For IE8 and earlier */;
}

.om-activectrlitem {
  opacity: 1 !important;
  -ms-filter: &amp;amp;amp;quot;
  progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&amp;amp;amp;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;
}

5. Chèn code sau vào nơi bạn muốn nó hiển thị:

<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'>MT Blogger</span>
</a>
</div>
</div>

Chúc các bạn thành công!

  • Blogger
  • July 8, 2015
  • 0 comment
  • 170 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang