Banner 728x90

» » » Hướng dẫn tạo Menu phong cách Metro UI cho Blogger (Blogspot)

Hướng dẫn tạo Menu phong cách Metro UI cho Blogger (Blogspot)

0 comments

Menu phong cách 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. 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 đơ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.


Sau đây mình sẽ hướng dẫn các bạn tạo Menu phong cách Metro UI cho Blogger (Blogspot)(Blogspot)"


1. Đăng nhập vào tài khoản Blogger > Mẫu (Template) > chỉnh sửa HTML (Edit HTML)
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: "
  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 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;
}

2. 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohZC5M3fBDrig1a3eYFxx6QuhCCCsHP7Dlx7VZ9qys4Q4ledqYh3IsxS4dy4qbQGh4-CAZrazB3DHHnSznD-qRQ3uLBCQ3fOWmqx4vnz1h1Jve-rTg6lDxXsZInuUvvJ1N3w_X3-cjeA/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5C-DON0SIgViYGt37TQsPlpAFxwfQw_RwPOOJ7fTrnMRVKc_yZhzjhQVm9muxntUBbYnpzG2TdOeddDnhcP0Gy5RfKl4QndKDUmbwx7XCCQKg2KbjEAvBchZKLSpZZHxCyxPDkJzv6Ns/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTFdzYYjw6hWwhG1xxj7GEqn3ZpnpOPsQKsveHKxXTLwHTzpuz_pJp8VXmFbMR8-F_K5Pz9qFvJhUIn2b-JsFTPSMpDpYWGnDgGpLlByTysfDsSGhyphenhyphenJ52La3TQPjPkZXElx6bxW6ge6Q/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcWUsQgRCMXF3gDW4OWq321r_aTehKtOlzqPlmI5gFk-QFIYKCJJZWAujLLWgOw5dH3LSeo_uUI-oavpJj-qJ_txl4oVH7W9iyrs0s1i7tHWmi7ViaIilRzf_uNI8GzvIS_CbFXEV2_8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3F38dSG6SMMZkz4LkGuvC8QXmnjz8BubyfZiBbA5rhyMUK8AQQDUk46ilcvVj6nDrBLo1vKHysjhPCcLgknNvWl6voysC08whyUV2rd3mZ6m2rzjC_0CQyZkxccvPkQmcdRUyAkIcpw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco4x-VB2KH991_D_W5R8aDlV_Y75p4K0aX-si-KRriqe-JdUk8oC0gz5DmNCy3KX0dRgl5oXhGNKkwGZcSGahQWE3RSPj8bxFlo_3rp-UXRkyXkHoMecWtT98EmtUjrhOCGhElhwOlFo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_8BLcbO04JvceFq9zJ_w1sJDJhyphenhyphenrKL1l75B5ZJJt5IsHCBKwlnRHJRx52ZaKT4vl3fcMVb14oo704GIEQ-h4nYg3nLB_lSoN741_9h7B2lu1CBS1lLw3i469hNo0tV_AQlu0u6wno-0/s1600/HBT.png'/>
<span class='light-text'>MT Blogger</span>
</a>
</div>
</div>

Vậy là xong. Chúc các bạn thành công!
About Duy Khánh

Thích màu xám, ưa uống nước cam. Đam mê chia sẽ những thủ thuật Marketing và lập Trình

0 Comment "Hướng dẫn tạo Menu phong cách Metro UI cho Blogger (Blogspot)"

Back To Top