Hot Post

Tạo Thanh Menu Metro UI phong cách Windows 8 cho Blogger

9/06/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Create Windows 8 Metro UI Navigation Menu in Blogger

Nếu bạn thích phong cách Modern UI trên Windnows 8 hay 10 thì thanh menu là một sự lựa chọn tốt cho chọn. Ngoài phong cách Metro đặc trưng thanh menu còn có hiệu ứng hover đẹp mắt và có hỗ trợ responsive. Đặc biệt thanh menu này thiết kế hoàn toàn bằng CSS, không có javascript hay jQuery nên bạn không cần phải lo đến vấn đề gây lag cho blog nhé.


CSS

1Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin> 
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; }

HTML

2Thêm đoạn code sau vào vị trí mà bạn muốn đặt menu 
<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/AVvXsEg7tYnW-MyW1Y0YYLCqrvpaenwtTcOFl-MQyAvGBXeWHGMePbpTWN3ddaWBGlMTkMt29KMz8gRuPy_mNn2l3GLyaGnYXHMg0F6wGFEpn17pUPIx3RC5CmTYb536-d8F47cYm39cq2GLIRE/s1600/home.png" alt="" />
<span class="light-text">Iris Tips</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/AVvXsEgzCEnuiUkQvuR0RLjJ5Bswjb7AMqmy3sSaHe-EDVYyzDuXudreOJHRMtxpaw15bd2avawv8BkMHm8zLcO9j-_E6DxgaY_undjWH3PGoPyfIUtbH0-vtNs6qojHg_ISp2A7OvN8_CSVi0c/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/AVvXsEgfSSflBNiirbpswXd7SXNTezNICxDuZ0UB0Uz4ddC64nukXlRwBW6FDY-j7Gs8H9CIOiYegAQtSRMBdnVeO_-zSQnzNQWEx-yNervmzeBl66kjdeQqQ5Aqpnsr6THnCrWAiy57x8S_MWU/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/AVvXsEhxYfLy5TSV3hwhteeC_4utWb3paaPAWnAu-qDTLsa06S9oICzXYKHUgD15j3bI11MVT8uNWCFne4aeh46Y6TyVNW8-j0C0uDKMKlqTjS0ueR2BExDWz6hLQIaEILYDimqtMQl1UUqb67o/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/AVvXsEiViVz4ff6lpOtVVji1g6r-SBkkYG5nNas9SNOlH44DfwcAthVYGeD2aImDe-JW2RbPvTWT1msti-CL56CGGYUT65JPssUl7fUOixarnkNwztc2ZvL8xv_uzGI-55gpJazOEYWfSojHAKw/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/AVvXsEjvf-a83AZ_W4XiMru_HrPpgrIG68ryVkWVn7sO1fXvetfVxdFPKnmQHZdUt5B8bqFPIRmzj6E6pfdDjsCSt2Xp4IYE6STlHyilt2-qBKNIbEhxzIHTGmOCdbMmn4Pv6-uDapQKLWXHrP0/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/AVvXsEgONy3jp9L9r8RPH6DBGzv1dAio7mY1xbAnDKBKKEbe3fW0BmpFei2WlKNtXZu9Zf9UiN0Ct1c-efcaW9Ah7uRGgy23jDyJADfbyHsp-NUERqNY804ViECesW95dbGUehWOuSb8XJVIWNA/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/AVvXsEjPuAPHxqDc-j0d9gNmvf-lhXWRd4e9N4p8iENe9QELcfkxbam-H_HvEw6C6yT5dUMFZ1g8I7lch3TYoE9c5d7uciiWRPtzJhI9pcaL2gcGgirnZ7Q45la8s5ioMtL0SUm04f-hlZUO40M/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/AVvXsEgg_CsEGwk21quXC8X_h0WV1djI6WXIJiW-zXPl50OpiHxmZL8JW7mp0MIkobWeFB3CzucqTeUhScjO-9duwvWBGShAUgdF1QW3vSNZ0wNTbMP8QdIKewC9VeUOBSe9wNbibKj_6MyHELE/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/AVvXsEgdbDJErlVWv2NgruQ8tBh-KaBu8-Vy_91uT6kpkihN9g6EoPFmFvn1uaSgJo4lIhEhXDdaEaFiRH0kwhma8wnwy8mMZSewRJtTqE_3ysEfMC5k6J9ZvlbcxAXnkjMfk3aWZxFKGqBiCcg/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="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm5ms3gI1z4bf1jYJ_Yovj4FuGNRVPWu4zJuFf8K0OVO2rvllSv-pT0suTsTgMVIVoSTRT82cfwYBDGzJJmM1Cs9quXf_oNVGs4wK-llfBgJPugo7KFWa_Bwjl_cseCRP2OWIlL4-DxfY/s1600/MBL.png" alt="" />
<span class="light-text">Metro UI</span>
</a>
</div>


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by MBL/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Tạo Thanh Menu Metro UI phong cách Windows 8 cho Blogger "

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)