How To Create Metro UI Navigation Menu inwards Blogger Blog

Are you lot bored amongst your website’s navigation menu? Does anyone desire to revamp his unappealing navigation card into Windows 8 Style Metro Menu? Navigation menu is i of the heart elements of a website because without a user-friendly Menu visitors can’t search the content inward depth. In this situation, an ugly Navigation Menu could deed a slice of garbage. Therefore, it is essential to conduct maintain an elegantly mode Navigation Menu that attracts a individual similar a bee to a honey. To furnish to a greater extent than ability to Blogger users, nosotros conduct maintain created a novel windows 8 expect similar Metro UI Navigation card for blogger enabled websites. It has tons of features which nosotros volition hash out inward today’s article. 

What is METRO UI Menu?

If anyone has sense the interface of Microsoft Windows 8, or the novel make of Windows Smart phones, as well as hence this METRO UI card is non a novel affair for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is yet chaotic most it, as well as hence he tin banking enterprise tally out the next screenshot. 

Where The Metro UI Menu Would Appear?

It depends on a individual that where he wants to utilize this Menu because it is hence flexible that it tin conduct maintain shape of whatsoever subject or template. However, it would live on ideal if anyone places this card at the transcend of his website yesteryear doing that, visitors tin easily access it without facing whatsoever hesitation whatsoever. We conduct maintain attached an interactive Metro card below hence don’t hesitate to endeavor it. 

How to Create Windows 8 similar Metro Menu inward Blogger?

The steps mentioned below are ideal for those bloggers who conduct maintain less noesis most HTML coding. Following instructions are extremely straightforward hence anyone tin easily apply them. Follow next instructions correctly.

Step#1: Adding CSS StyleSheet:
  • Go to Blogger.com >> Template.
  • Select Edit HTML >> Proceed.
  • Now inside the template search for ]]></b:skin> tag as well as simply higher upwardly it glue the next CSS Coding. Once, everything is done Save the Template yesteryear pressing “Save Template” Button as well as proceeds to the side yesteryear side step. 

/*===MBL METRO UI Menu==*/

trunk {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media concealment as well as (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 as well as before */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=80)” !important;
filter: alpha(opacity=80) !important; /* For IE8 as well as before */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)” !important;
filter: alpha(opacity=100) !important; /* For IE8 as well as before */ }
.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 concealment as well as (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 bridge {
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 bridge {
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 bridge {
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 inward Blogger:
  • Now it solely depends on a individual where he wants to identify this menu. The ideal identify of adding it would live on simply nether the header. Therefore, glue the next coding anywhere you lot desire to encounter 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=”http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
 <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=”http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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=”omelto.com” class=”gradient”>
<img src=”http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png” alt=” Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inward Blogger Blog” />
<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 expect similar navigation card has been integrated inward your website. Remember: This Menu tin live on used on whatsoever Platform that supports HTML or CSS i.e. WordPress, Jhoomla as well as etc.

From the Editor’s Desk:

Hope everyone has enjoyed today’s feast. There are roughly novel surprises planed soon. Let me hand you lot a few clues, nosotros are before long to get-go a novel site. Hope you lot guys would appreciate that projection too. What are your thoughts most this Windows 8 Metro Menu? Take a lot tending till them, Peace, Blessings as well as Happy blogging. 


Sumber http://www.mybloggerlab.com