Saturday, 22 June 2013

How To Create Metro UI Navigation Menu in Blogger Blog

Are you bored with your website’s navigation menu? Does anyone want to revamp his unappealing navigation menu into Windows 8 Style Metro Menu? Navigation menu is one of the core elements of a website because without a user-friendly Menu visitors can’t search the content in depth. In this situation, an ugly Navigation Menu could act a piece of garbage. Therefore, it is essential to have an elegantly style Navigation Menu that attracts a person like a bee to a honey. To provide more power to Blogger users, we have created a new windows 8 look like Metro UI Navigation menu for blogger enabled websites. It has tons of features which we will discuss in today’s article. 

What is METRO UI Menu?

If anyone has experience the interface of Microsoft Windows 8, or the new range of Windows Smart phones, then this METRO UI menu is not a new thing for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is still chaotic about it, then he can check out the following screenshot. 

Where The Metro UI Menu Would Appear?

It depends on a person that where he wants to utilize this Menu because it is so flexible that it can take shape of any theme or template. However, it would be ideal if anyone places this menu at the top of his website by doing that, visitors can easily access it without facing any hesitation whatsoever. We have attached an interactive Metro menu below so don’t hesitate to try it. 

How to Create Windows 8 like Metro Menu in Blogger?

The steps mentioned below are ideal for those bloggers who have less knowledge about HTML coding. Following instructions are extremely straightforward so anyone can easily apply them. Follow following instructions correctly.

Step#1: Adding CSS StyleSheet:
  • Go to Blogger.com >> Template.
  • Select Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> tag and just above it paste the following CSS Coding. Once, everything is done Save the Template by pressing “Save Template” Button and proceeds to the next step. 
/*===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; }

Step#2: Adding METRO Menu in Blogger:
  • Now it entirely depends on a person where he wants to place this menu. The ideal place of adding it would be just under the header. Therefore, paste the following coding anywhere you want to see this Menu on your site.
<!-- mblmetromenu -->
<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/AVvXsEjCnoxaNeRpS_kbDuoOn0fxBRnmKRX9CtcGKGdf4T_TXRB3JdE_pRmj-9j4S0sSO9DOnHEL8lnrKzPX5_nUZ7GwANOKp_mfKzoVNU9w78n38xAADAalGPivnBuxdAHr4FRBlMXcQBjHkZ8/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/AVvXsEiqEtdZmAyxEYB2pZsQ0MtEwtB-FC3bsILYyLCpycgPN4lRnSeE7XTN1qOx6RuCRBk4QnuX1lK5TgpD9tcPTFiWgf85F6XWiYzjwDq_0Zex6bi0_9YKkqcGnNT0zJ4CNiZQtGbjx4wKFAw/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/AVvXsEhppTKCOMAbH50Zy6DW6tFqSXi2gyPh9Ier29U2JKlW2N7wkoNCQLFKI_tS-DwdOIaXnB-neRleDxrNtOeo_7dOzANxu457XYprmFrOWubcCNTpT8vIoY101OA_7fHBhh0tmA_7z0Wff4Y/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/AVvXsEhbKpk3KYmCReBtsrmMk2rz0yVnmHQbvmBiQI-n7mk-RXYqUPtNn5CQ1o8z4B2gYCHZUe4sIW9MqQL9zEHRXxFHyOBl008WaAcAseGJcAjmqo56sP-oFHuTwxJS654SEuxtRbxUsw_6JGM/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/AVvXsEgxFfktrAweEjpf6srBgmWZgE8TD1xBo1U_Y_oCB81Oi3b9zE-5iCCtE2SjH51CgEQCmGuOq4O0Kb-ICTBqTLQo2VSJfpnzRC0vnRBRyrt7CNamwe3paZkCEduftitHHZuMPn2FbGOkh0A/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/AVvXsEinfGGu38rNlzcE5LCkjXSRFbe9p_8ko8U4CH7E3P9UQFCD3mUlSqlzrfKA7VGWWauQVJwY1gg7hh6TCQFr539l7EIWqK47f1hh3qLlEz7yulQSNd0B575y5kC8MyF6NatInp5-q47ZQ1E/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/AVvXsEhxFrJBQ8oYWIY4zQeehapWZRpEVyU2lsvesS7RjqiUXG9X5AVBPoQFUTw4Yb_vXKG_vOMyu9TjJYlxujfs0LDg376Nytn_r1jd-EQahrlxZzFVAx2aTJKPBbIHd3oSmEDLIhU1pRdEb1E/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/AVvXsEgNv97acAwAPpYYV7tzE99sez9rhB2vNSudkWUZy7O3vyC_XXJiC6OwWFT924QWoW5th1Zxjhqon3RO-hXyvy92M1lAvmO9freLCLXcLx9G6oyyMYwAMQl7oAiH5SgvamfGkavWpvmXjqo/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/AVvXsEgm0OTw0lsp4Bb3ppPwDF-XLe7cFifX-HGqOgsSH7AXZB7h5o_oxd0qPkVfJnColrbIZo3Kul6Aifg_lMfgyH_F9qNlJ1wgxGGaJ7Weh8uf8C0e9pbcstVKw89ZgYmcyVVQQVK9RSA9soc/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/AVvXsEifgW_qCJJsDMp9nwLkefd1mwTImAves5mtvNzubXwQU5EWVMIKgj-Ye4011lGhnGXiYv7XDRWMM3qMpPdBN3lmv7nb_GhAp2rLrcNXPLiO2iqpm4wHN3LWzhMZ-_SbWaAGQqFCGCav6Ak/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/AVvXsEiyFzR-auFomzSSe4Ox94w0hB77hpNx5RHLiml3apr33JgiYttppLL7Bq74FPHGxqSRHnad8ulVmYNylBL5kOy5Vid0MeKyp1YLzCCoZ4QIwEkUYQdkafjQncuiYg1BttnucjiBXPGkLMM/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
        <!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
All Done: Indeed straightforward? Well, that’s all. The responsive Windows 8 look like navigation menu has been integrated in your website. Remember: This Menu can be used on any Platform that supports HTML or CSS i.e. WordPress, Jhoomla and etc.

From the Editor's Desk:

Hope everyone has enjoyed today's feast. There are some new surprises planed soon. Let me give you a few clues, we are soon to start a new site. Hope you guys would appreciate that project too. What are your thoughts about this Windows 8 Metro Menu? Take a lot care till them, Peace, Blessings and Happy blogging. 
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)