Pure Metro Style Menu for Blogger

In previous post we posted Collection of Metro Style Widgets for Blogger. Now we came up with this colorfull and awesome looking metro style menu for blogger. We hope that you will find this good and would like to use.
You can also check out CSS3 Content Tab for Blogger.

How To 

• Go to Blogger dashboard and then Template.
• Select Edit HTML.
• Now within the template search for ]]></b:skin> and above it paste the following code.

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 MetroMenu */
/* 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; }

Now copy and paste following code wherever you want menu to appear.

<!-- metromenu --><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/AVvXsEgYBEhIChcguzJKMtSKDJMLdPUaZzcXYBPHNTon6W2Own8Mloj1jmi7G-kAaeUAODDzFGUT7Ym4xZvIhR5lQWcRPLZUMA4v-Q-A5Z9jypvLgWUpNvP5e1NROETK362uhcMvh4vFU9950tk/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/AVvXsEhaX8dbLhH0LKSvRahQ6uwUWqOGRL3srBLFut8Lshp8Xa22Vah9DzVlJMqpireWLYlWvuXHnHKmo_e-hK2OY7fqXaHfNobQNTMLTNJGwrqCFkcPwP0DI9EChLz2HQCD7ev6cMXPXzvH5MI/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/AVvXsEi6Kmh-4PDpiMMlnUdJ5rXHXoz7YfViJbGJjk2YhVPwKNKQ_pF1PQcZuf-6G-yybtGY69iNVnWXQzwM13TQ4lgRreEnF5e9Kl3HP164qWZuSyx_8blYaSxh3STZUoGicGsBxn44-Ylff6s/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/AVvXsEhxsmEJwoVv6IGgCqVm8wGpznRRZYjXQsVXN-rQK61BEPfv-tU9YPI40ExuCPpojhdWhd4H46mWF-bJsOcl9jnG4BYingyhyphenhyphenERQqLGTF_oWsMp2W_4Djg61W1-qmY1R5agkpbekFd2tGSs/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/AVvXsEiP0d49MY_qPZWNpTJuIVH1VHAgtYKtKMYpQtqenmocIJovcvAq5BDJ2Q-9lkuVRQqrhlfixoKbgRhdjWvj6WSSaj3icZtS6-Ot6wIOM1ffYKBRVQXi2aSmrlnIqHbk6vavBSXrp0bI-oM/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/AVvXsEjFWW3q-je1eVuZ1mc0OkvDJodyZAdmyLpDPlgUniJRIcpjLBrY-r_GKLw7f4RLaaRLRj27QZRZs3aK1xz61SGlKqS-fsWzAOWBkUIJxIN7TkqWgMcRkx9R2ndCnRZHKFV4IoJgbWIIjcQ/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/AVvXsEi0_ijQtmqw6z5ys84Vn7apbyNPkSXX-DPHLO7jvJH3pbUQUiSB4A12oA631tOfhxbXAFaF2xkrpLk5ozdUrnNMnnxTnsFyg3gv29oMVPHjBPNt_rWwd2qo3P10GatJDuGVsoQg3mTm1zA/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/AVvXsEhcGrisKx6pfaUmbWryJKtofLam99C9duVqvzTQ-DdLpIXOxXi0mh61AKOoqlwUuQKlXOOQBhogiAG13BYfVxGeftjJ40nnDoek0mubdhbgZUJtTb4i4opj6LEAfRe8Yc_1O6ELCULl9HU/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/AVvXsEgn2LOqMbSWKbI9aVjYteYzk7UkJnATeAWVuY0WxJwVsmoCRrDWwkxOnrRIM4qlSMj7_20iltG6MC2xkr1Mmf5dn9cI4mrpFffmcB7PMZpYyrk6G-dNZI5Vz3ny3xZaVpO9B4GtndlRuKE/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/AVvXsEibVq2lrWYbKdcXQ7XsJc0OkUinOv-czlCJNy4byXXKScxFg_LRxEkm7J9cwtvtR_9MirNi4lydGsPD-4ZBegFabb1J2rtfnUpqwwizIkTD1Y_bNJLD-dLQXtnN08yBFijzPPazAeH78Ac/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://demooaxe.blogspot.com/" class="gradient"><img src="https://lh3.googleusercontent.com/-wSxu4PbMPko/UZSTgEJFCWI/AAAAAAAAAGk/CSoTV_Kr8C8/w506-h281-o/Bloggeraxelogo.png" alt="" /><span class="light-text">Bloggeraxe</span></a></div>        <!-- End MetroMenu -->  </div><!-- END metromenu --> 

You are done. Enjoy!