How To Create Metro UI Navigation Menu in Blogger Blog

Advertisements
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="http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/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="http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/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="http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/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="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/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="http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/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="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/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="http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/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="http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/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="http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/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="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/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="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/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. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

34 comments

December 13, 2012 at 5:27 PM

Wow you really rockz bro.

December 13, 2012 at 6:05 PM

Great widget bro.....

www.MoreBlogTools.com

December 13, 2012 at 7:54 PM

really great,i was just imagined it,but never thought that it can be created through simple html programming and just common sense. awesome.keep it up.

December 13, 2012 at 8:03 PM

Yar,.. this is cool... but y a red line appears on hovering only in 60% of Menu's...

December 13, 2012 at 11:45 PM

wow a new site, well what niche it would be?I am really waiting for your new site bro.One more query on what platform blogger or wordpress?

December 14, 2012 at 1:03 AM

@Faizan
Awesome bro! You are doing great.

Editorial Team MOD
December 14, 2012 at 1:32 AM

Dude, That Red Line is Appearing Because there is some few Bugs in our FRESHABLE Theme. However, if you try it in a Simple HTML Document then it won't display that RED Line. Hope That Helps. Peace

Editorial Team MOD
December 14, 2012 at 1:33 AM

Well, Because everyone was asking from me to Giveaway MBL Theme. Therefore, we decided to start a Site dedicated to Blogger Themes. Mind you, they are extremely Professional. After designing few themes for Giving. I am feeling a bit jealous. LOL, Jokes a part. Thanks for Being a Great Reader. Peace

Editorial Team MOD
December 14, 2012 at 1:35 AM

Thanks Sis, Without your Prompt Support this wouldn't have been Possible.Thank you very much

December 14, 2012 at 3:38 AM

dude, you are very cruel. You always remove my comment, i used to love mbl but now i think that you are as mean as mbt. Bye forever. You have lost one precious reader. I always place one link in my comment with no spamming, and you always permit others links but not mine. So bye dude. Bye forever. From now, i would never suggest someone to visit your site. And don't feel too proud yo have such traffic. There are both, google and hackers present. Take it as whatever, i don't care!

December 14, 2012 at 5:17 AM

Yup Its true he is very cruel.........

Editorial Team MOD
December 14, 2012 at 5:25 AM

MyBloggerLab is a serious online Journal of everything that related Blogger Platform. We are an online resource site that provides quality tips, tricks and all the other tools that are essential to enhance your Blogger experience. The ideal way of improving our resource is to interact with each other within our site though utilizing comments. To provide quality based comments, we have a strict policy to fight against spammy comments.

You Always Do a Comment Like "Thanks VISIT MY SITE" We Call it Spam. We don't know what you call it but we don't allow such comments. We have a Comment Policy Please go forward and check it out.

I can't argue more because, We don't have the authority to change our views and ETC. I Wish you could stay at MBL and share your views. Try to comment to educate people, not for the backlinks. Hope it helps. Peace and Blessings

For More Check Our Comment Policy:
http://www.mybloggerlab.com/p/comment-policy.html

December 14, 2012 at 5:35 AM

Dude, I guess that being a blogger you should know that comment systems by google are nofollow, and i never posted a comment VISIT MY SITE.. I always post comments like:
Thx,
MyPremiumTricks

That's it

Editorial Team MOD
December 14, 2012 at 5:39 AM

I was giving a Example. Well that's our policy we can't give backlinks either follow or nofollow for no reason and if you want a backlink then do a proper comment that can educate users. We're here to share not to create backlinks.

Again you have used the same chunk of keyword in your comment!..

December 14, 2012 at 12:23 PM

nice article but how to put this under header

December 14, 2012 at 8:14 PM

Really i love this navigation style and i think it would look amazing on my biology niche website after some tweak. But one thing that is sure all credits goes to the most talented syed bhai. once again thanks for providing this wonderful widget.
One request more would you please provide a template like blogtipsntricks having a static homepage like websites for bloggger.
Regards
Vishal Srivastava
Howtobio network.

December 15, 2012 at 12:52 AM

I loved the navigation bar . Syed bro , I would let you know that your syntax highlighter is not proper . The HTML is code is overlapping with hthe background

December 16, 2012 at 8:56 AM

This Is not working friend :(
help me !

Editorial Team MOD
December 17, 2012 at 10:17 AM

Thanks! However, its working fine at our End

Editorial Team MOD
December 17, 2012 at 10:17 AM

Add it just under Header-WRAPPER

Editorial Team MOD
December 17, 2012 at 10:18 AM

Thanks for the nice comment. We will soon Come up with a Static Homepage very sooner Peace.

Editorial Team MOD
December 17, 2012 at 10:18 AM

Can you Tell in details what problem you're having

December 18, 2012 at 10:35 PM

this is awesome man nice work...

December 19, 2012 at 10:31 AM

Friend I need A big Help I mean I want To Customize This To My blogger Size. first Have a look At This Picture This is what Happened When i add this..
http://i1261.photobucket.com/albums/ii595/isuru007/PleaseHaveAlook_zps3cbe43de.png
I want to Remove The "Search" Thumbnail And add "Music" Thumbnail above The "FB Covers". Please Help Me to Do this.
and i want to remove "Help" , "Get Help" , "My bloggerlab"
the last thing is Hover Color i mean the shadow Every thumbnail Hover Must be Black.. Just Like "Youtube" Thumbnail Hover(shadow)
Hope You'll Accept My Kindly Request !

December 20, 2012 at 12:19 AM

Please...!

Editorial Team MOD
December 20, 2012 at 12:22 AM

The Widget is Hiding because you have added the coding in the Layout. Try to add the coding in Your Template.

Secondly, To Remove, Search, Music, Get Help and MyBloggerLab Remove the Following Coding.

<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="" />
<span class="light-text">Music</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="" />
<span class="light-text">Get HELP</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="" />
<span class="light-text">Search</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="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>

Third and the Last Thing, You can Change the Shadow To Black By Replacing

shadow-red, shadow-blue, shadow-green with shadow-black

Hope That Answers your Question. Peace

Editorial Team MOD
December 20, 2012 at 12:23 AM

We have Answered Your Query! peace

December 20, 2012 at 12:49 AM

Here Is the Thing i needed now
How to add this Before Begins The posts By using edit HTML ?
where should i paste this code ?

Editorial Team MOD
December 20, 2012 at 12:55 AM

Paste the Coding under your Navigation coding!

December 20, 2012 at 8:42 PM

simply awesome! I think I will apply that to my blog

December 21, 2012 at 4:33 AM

Pls help me. i want to put this menu in center position but it alway align to left.

December 21, 2012 at 5:00 AM

cool .Product of long hours work,r8?

March 30, 2013 at 1:32 AM

Hello sir
already have this full template downloaded by templatism. I want to ask a question !
I already have a navigation drop down menu and want to use this metro ui navigation menu to link it to my facebook page,twittter page ,feeds page.. etc.
But the thumbnails are fixed and i can't change these Home,Wishlish, Accout..
my html- http://prntscr.com/yetrc



Thanks Sir please help me !

Editorial Team MOD
March 30, 2013 at 3:26 AM

Sorry dude, we are not supporting customization.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.