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 1 of the total elements of a website because without a user-friendly Menu visitors can’t search the content inwards depth. In this situation, an ugly Navigation Menu could human activeness a slice of garbage. Therefore, it is essential to receive got an elegantly agency Navigation Menu that attracts a individual similar a bee to a honey. To furnish to a greater extent than ability to Blogger users, nosotros receive got created a novel windows 8 hold off similar Metro UI Navigation card for blogger enabled websites. It has tons of features which nosotros volition hash out inwards today’s article.
What is METRO UI Menu?
If anyone has sense the interface of Microsoft Windows 8, or the novel attain of Windows Smart phones, in addition to thence 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 all the same chaotic nigh it, in addition to thence he tin give the sack cheque 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 thence flexible that it tin give the sack accept shape of whatsoever topic or template. However, it would survive ideal if anyone places this card at the hand of his website yesteryear doing that, visitors tin give the sack easily access it without facing whatsoever hesitation whatsoever. We receive got attached an interactive Metro card below thence don’t hesitate to travail it.
How to Create Windows 8 similar Metro Menu inwards Blogger?
The steps mentioned below are ideal for those bloggers who receive got less cognition nigh HTML coding. Following instructions are extremely straightforward thence anyone tin give the sack 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 in addition to but higher upward it glue the next CSS Coding. Once, everything is done Save the Template yesteryear pressing “Save Template” Button in addition to 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 in addition to (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 in addition to before */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 in addition to before */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 in addition to 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 in addition to (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 inwards Blogger:
- Now it alone depends on a individual where he wants to identify this menu. The ideal identify of adding it would survive but nether the header. Therefore, glue the next coding anywhere you lot desire to run across 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/AVvXsEhSbRWi_WDS3UYBWSj6W-bvldZ9S0UUFoIp7gwItmXApXqDYkRSJjEEkYJcHtGgsf2v_612AMIUbMi3Cffqd8gRDSlSJ_bG20WCFIur3OVIeABtIejR8gKDChord2XJ7Harh1DgRdoD9gs/s1600/home.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB0q9srn4O4VYKZVh5HDKHGlrDdp1uZUXOyTtKKZB1qtzcdec0V388tij_TEWINkK5pXMn_i-I4xWfdvvJG7dEl1d8RWOc1zGfjRqI1Z-4aT6J-PZU31_AWu7hY5OitfDQ0yltcneRUd8/s1600/messanger.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXgBdX4N0rEDcLC_tJbFRXCY3k38VqHH3FSrZ1GO6BJhFCD0sk-hJWkBHUhg5cDRquyKmXSPa37gSpXAZC4N6GVMu5s-NVKnFh2ibqN2-70u-7rDIs1261oCZgBWgJwno87GlmMxTVmg/s1600/rss.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zmJL1WPdnrhqCeKn2Gjjcs0uzZEJ9FItrRipla4dPbPZO1Zrn_fb-W1m2vi981OcPyoI7W3Us2nhZoxERmNbw9h59eXhD8XypCHnBYDdjYcJa-_GBNFgLjxJLvYaPCc9PTAPmRXwIw4/s1600/search.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVxtJy-Gp805i7zWhQpNAzAQZuuFHfTGl0oNhXX1aEMaOhRM8oCsiT7j7eCQ5OiJeu0clKDitE5zMq1-FhUsombWMadq7hcGDW9gXiaUTMZSNF-sgFOxVflamnfDjR5RW9A3bhRrbcSjs/s1600/mail.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48iLe6udfDI9rZryMOnLLkCxyX1KLBphez78UcqDvDsBy6BSiWK8Pt2CLU3GVigB-5byW_dnxJEOCXhcwVTfrkeljaiy1zz7j5XCCrnmVjgY3sWc5dpuTFv0j4YYgaa-gml_ch1Fztq8/s1600/help.pn" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0yGRZUk94m4WNGt4VxGYOun56lb0A_pD3xJxIqjnDzsCJuTFiVMlYQqyv5pSR7pMXA_1D_5F_32I1Ziuscrg6FArLvFVA50I6zyf2aGtUbreDCCUlAKnS_P7835-81B4mU5WeoaWSgg/s1600/youtbe.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjxtBxES5WugAe14q54DxGDvpSIuTqVOFDiwUInNd7A78yddEUXe_WHCEEijKcaObm6CNmNhMEGLy_5ELOfj59A2zi8ChyG3qk-WRP_A5jOKN9Vnzrd12TIH3jVHCWHyYH5fP2ai_OL8/s1600/face.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXXL4YDaplJfbObU2af8GXFeD5k6UdfjvB1CmhcX1ab7xvrtweHRdMFlod-Oij85M62GLpihST5bwarm0Wtw7vl5qRbspNllb1CKussVSJh0G1TWg7HczbyYxmvBcIAS8dMRyr83qyk5k/s1600/photo.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00ybGKOXgdz1hBnOBH4oq6W7feNzk1pyTbdAlaLtND0v5qcbj2Thz3H8pdWlYnJo_NGTSBwRcGsqtoH0wJQTL_Fu8f22_49vpVAR0lvUAgSHJDyy6wBIBd0d4HshDMem6qidw5pbWaLo/s1600/music.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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="http://www.mybloggerlab.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZ5NH-P9G-hRwAkRC1xzkz10v_iXVDgGWfhAxCmXv6VdsChIVZGxFEfJMQ-u4zx_lptLtMnKPonhS2fa6ArnWu7FtTCM4gZz_5PQHjdCK139YG0zewjkZQHnDvcdfiKbsTNui8z8h3Xs/s1600/MBL.png" alt=" Does anyone desire to revamp his unappealing navigation card into Windows How To Create Metro UI Navigation Menu inwards 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 hold off similar navigation card has been integrated inwards your website. Remember: This Menu tin give the sack survive used on whatsoever Platform that supports HTML or CSS i.e. WordPress, Jhoomla in addition to etc.
No comments:
Post a Comment