Cara Membuat Metro UI Navigation Menu di Blog
Menu Navigasi merupakan salah satu elemen inti dari sebuah Blog karena tanpa Menu yang menarik tidak dapat menarik pengunjung untuk mencari konten secara mendalam. Oleh karena itu, penting untuk memiliki Menu Navigasi elegan dgn gaya yang menarik, untuk memberikan lebih banyak variasi menu untuk pengguna Blogger.
Untuk menu membuat Metro UI Navigation caranya:
Langkah 1: Menambahkan CSS StyleSheet:
Masuk ke akun blogger
Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.
Sekarang Silahkan Cari ]]></b:skin>
Letakkan Code berikut diatas ]]></b:skin>
Berikut Kodenya :
</*===METRO UI Menu==*/
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.metromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.metromenu {
width:100%;
}
}
/* MetroMenu */
.MetroMenu {
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; }>
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.metromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.metromenu {
width:100%;
}
}
/* MetroMenu */
.MetroMenu {
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; }>
Langkah 2: Menambahkan Menu METRO UI di Blog
Letakkan kode berikut dibawah header
<!-- metromenu -->
<div class="metromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOCjH19YDYOVf_IjY2ON5GhXUfanUMu3KOkzUK0tjykooon70rl7LqSDEk-MdQ5oL238Q1UY57zu9Ridujdg17WdVAijdlc8lu23Pgr6_rfCexI5Aky1VJMbZPiKlr_uCi5hN_p_rcA/s1600/OW-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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FJDdp5WLlYU3i6bOs7Hvxc0GjJxJY6CbzHWfeW_hxraHfSdaGE9v1UEyJvEbSjVOqZ-soW2hw_aIg3pmPCJSWMjaoWdjEnWOX0hGZw34lPT3Xo9MmxNKKKoTUP458ZsgP9yGANlRnQ/s1600/OW-messanger.png" alt="OW" />
<span class="light-text">About US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht3VLQJ44kX_sBY4oAesKQ0UKsY24uGchBal314WVx6vgwzEftw4YbF8BUTxsq19w-mPG_IraAd9SV69rS4Bt0NCv1qOtEypsT7lnAAFMymmjvmeEaA5L-xyEeEBNESvI9SlPTOVa6vQ/s1600/OW-rss.png" alt="OW" />
<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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6eiDFqRVj8o9oRELhYspP6TT_q9K71_M8kTbFz1ZRBfvYy9rgTxHY5ORhKUE3T8j4UFC-JmsZSkI0UmRj-d1Hfp4NOXtlAdoj_1R3bH4QC_kK1_C-72Dk5N_4rmVgGIRj-CTQB0pTCA/s1600/OW-search.png" alt="OW" />
<span class="light-text">Search</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxy_2ytWJ15JNP_p6587JFiWZiJvBmaKUWWgppSgstfUh29OriGHiDmFMelHOjFev_KjB9EyBk96AdYN1cuhcHAEyBJwr-jsfD6r0ToLc6XaMj3V-02Q-yhxUsYJ-7Ayqz2St2DtHoqQ/s1600/OW-mail.png" alt="OW" />
<span class="light-text">Contact US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQhxfHg8OlVmUv5HBvoUKEvjIYs9I5trTOMZgaW_3ZdligZlVYpn4JM_gdu7_6XvBbmjakCTK4rEJ2ZLSWQLAFUUtNHZ2zL8Tgg7xZOha5ML66qbsG5IEamy-gotGE4S5cELT2zdZbZe4/s1600/help.pn" alt="OW" />
<span class="light-text">Get HELP</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabCVdqMiYdZ6yqyab21rsiyYPwIht-s84QWxAKJtUDy9UzYHaxcYYpjzDRhQLa8ZBns1zfoaSklxB8QylUBwN5orbcbqiKndE5fne9iAuFkw9ljIgEjc43yDodw0fjtD4SeMh2YDHHw/s1600/OW-youtbe.png" alt="OW" />
<span class="light-text">YouTube</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxitAA4P22PXlyHYcz1R0e-vePB-b4oPqBQu8PrgF3QJD5uHP-XamCZu8mJvoUgbVO7DfF2c7mgqNWYh5TnRbdhFDDpMuHFayeXGd_XTj_kXmYQXe5qPJVukJhBi6AomSnYIJXj5iog/s1600/OW-face.png" alt="OW" />
<span class="light-text">Facebook</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRsypwLykk_q9jFtp5Di-QsOvJpTnq5k8krCdkFNZbi-2vAkQMD-KcSR8GGjg92nstJoStt8iHywz3D3tJThyfBBp5GZR-oSM9mw7Hu5aRXWrQFF3WutDSHa2qynYn2O90ipsbSKhF2Q/s1600/OW-photo.png" alt="OW" />
<span class="light-text">Photos</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXMKkoaa3yp-NqGloUL2eb_MEfkFCgwMrXsny8TCKMv34m5hOut1UvDaHMc5bWrzz4pH7lbOBzENjfscWqcYLbjI4C8ijnyRxdPAxIJcTMnqXLwixtuoFVoL0DDbXOtAg9rN_DHKEIA/s1600/OW-music.png" alt="OW" />
<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 MetroMenu">
<a href="http://www.nassroom.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlRKsnQW8I_vySGJhTWEHMO-mLAvgU_dEyowDX5eypbOQ0FEzxsZXnWnUxH6qlUlJ3x8sAF5Li2LwpmDH3mkKDqPNjyIkGwxLcolZ6grPeqvzoANqcX5rPcU8hxm_U8i0AaCSPf2DNQ/s1600/OW.png" alt="OW" />
<span class="light-text">Blog room</span>
</a>
</div>
<!-- End MetroMenu -->
</div>
<!-- END metromenu -->
<div class="metromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOCjH19YDYOVf_IjY2ON5GhXUfanUMu3KOkzUK0tjykooon70rl7LqSDEk-MdQ5oL238Q1UY57zu9Ridujdg17WdVAijdlc8lu23Pgr6_rfCexI5Aky1VJMbZPiKlr_uCi5hN_p_rcA/s1600/OW-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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FJDdp5WLlYU3i6bOs7Hvxc0GjJxJY6CbzHWfeW_hxraHfSdaGE9v1UEyJvEbSjVOqZ-soW2hw_aIg3pmPCJSWMjaoWdjEnWOX0hGZw34lPT3Xo9MmxNKKKoTUP458ZsgP9yGANlRnQ/s1600/OW-messanger.png" alt="OW" />
<span class="light-text">About US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht3VLQJ44kX_sBY4oAesKQ0UKsY24uGchBal314WVx6vgwzEftw4YbF8BUTxsq19w-mPG_IraAd9SV69rS4Bt0NCv1qOtEypsT7lnAAFMymmjvmeEaA5L-xyEeEBNESvI9SlPTOVa6vQ/s1600/OW-rss.png" alt="OW" />
<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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6eiDFqRVj8o9oRELhYspP6TT_q9K71_M8kTbFz1ZRBfvYy9rgTxHY5ORhKUE3T8j4UFC-JmsZSkI0UmRj-d1Hfp4NOXtlAdoj_1R3bH4QC_kK1_C-72Dk5N_4rmVgGIRj-CTQB0pTCA/s1600/OW-search.png" alt="OW" />
<span class="light-text">Search</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxy_2ytWJ15JNP_p6587JFiWZiJvBmaKUWWgppSgstfUh29OriGHiDmFMelHOjFev_KjB9EyBk96AdYN1cuhcHAEyBJwr-jsfD6r0ToLc6XaMj3V-02Q-yhxUsYJ-7Ayqz2St2DtHoqQ/s1600/OW-mail.png" alt="OW" />
<span class="light-text">Contact US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQhxfHg8OlVmUv5HBvoUKEvjIYs9I5trTOMZgaW_3ZdligZlVYpn4JM_gdu7_6XvBbmjakCTK4rEJ2ZLSWQLAFUUtNHZ2zL8Tgg7xZOha5ML66qbsG5IEamy-gotGE4S5cELT2zdZbZe4/s1600/help.pn" alt="OW" />
<span class="light-text">Get HELP</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabCVdqMiYdZ6yqyab21rsiyYPwIht-s84QWxAKJtUDy9UzYHaxcYYpjzDRhQLa8ZBns1zfoaSklxB8QylUBwN5orbcbqiKndE5fne9iAuFkw9ljIgEjc43yDodw0fjtD4SeMh2YDHHw/s1600/OW-youtbe.png" alt="OW" />
<span class="light-text">YouTube</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxitAA4P22PXlyHYcz1R0e-vePB-b4oPqBQu8PrgF3QJD5uHP-XamCZu8mJvoUgbVO7DfF2c7mgqNWYh5TnRbdhFDDpMuHFayeXGd_XTj_kXmYQXe5qPJVukJhBi6AomSnYIJXj5iog/s1600/OW-face.png" alt="OW" />
<span class="light-text">Facebook</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRsypwLykk_q9jFtp5Di-QsOvJpTnq5k8krCdkFNZbi-2vAkQMD-KcSR8GGjg92nstJoStt8iHywz3D3tJThyfBBp5GZR-oSM9mw7Hu5aRXWrQFF3WutDSHa2qynYn2O90ipsbSKhF2Q/s1600/OW-photo.png" alt="OW" />
<span class="light-text">Photos</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXMKkoaa3yp-NqGloUL2eb_MEfkFCgwMrXsny8TCKMv34m5hOut1UvDaHMc5bWrzz4pH7lbOBzENjfscWqcYLbjI4C8ijnyRxdPAxIJcTMnqXLwixtuoFVoL0DDbXOtAg9rN_DHKEIA/s1600/OW-music.png" alt="OW" />
<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 MetroMenu">
<a href="http://www.nassroom.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlRKsnQW8I_vySGJhTWEHMO-mLAvgU_dEyowDX5eypbOQ0FEzxsZXnWnUxH6qlUlJ3x8sAF5Li2LwpmDH3mkKDqPNjyIkGwxLcolZ6grPeqvzoANqcX5rPcU8hxm_U8i0AaCSPf2DNQ/s1600/OW.png" alt="OW" />
<span class="light-text">Blog room</span>
</a>
</div>
<!-- End MetroMenu -->
</div>
<!-- END metromenu -->
Save Template
Semoga Berhasil...
0 Comments
