Cara Membuat Menu Navigasi Merto UI Diblog

Menu navigasi pada sebuah blog merupakan salah satu elemen penting,karena dari menu tersebut pengunjung bisa menelusuri lebih jauh setiap konten yang ada di blog tersebut.oleh karena itu keberadaan menu navigasi hampir bisa dipastikan wajib keberadaannya pada sebuah blog.apalagi jika menu tersebut bisa kita ditampilkan dengan tampilan yang lebih menarik.untuk dapat menciptakan tampilan menu navigasi yang lebih menarik dan terlihat elegan salah satunya dengan merubahnya ke tampilan Metro UI windows 8.

Tampilan Merto UI yang saya maksud adalah seperti terlihat pada gambar dibawah ini,atau jika ingin lebih jelas anda sobat bisa melihat dulu demonya.

DEMO

Seperti yang kita tahu bahwa tampilan Merto UI ini adalah tampilan antar muka yang dimiliki oleh windows 8.jadi bagi sobat yang menggunakan sistem operasi windows 8 tentu sudah tidak asing lagi dengan tampilan ini.Untuk penempatannya bisa sobat sesuaikan dengan template milik sobat tapi idealnya bisa sobat pasang pada bagian atas blog/dibawah header blog sobat.

Nah jika tertarik untuk menggunakannya,mari kita mulai langkah penerapannya :

1. Masuk ke Blogger.com Template >> Pilih Edit HTML + Lanjutkan

2. Kemudian cari  kode ]]></b:skin> dan letakkan kode berikut diatas kode ]]></b:skin>

/*===AB METRO UI Menu==*/
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.abmetromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.abmetromenu {
width:100%;
}
}
/* abbMetroMenu */
.AbMetroMenu {
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 abmetromenu */
/* 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; }

4. Selanjutnya tambahkan kode berikut,terserah sobat mau tempatkan dimana idealnya berada di bawah header blog sobat.berikut kodenya :

<!-- abmetromenu -->
<div class="abmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft AbMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfTWvyxtfLDG0gRDn-SFyUKJXHugXuhE_18Zlnr4K-xjbRgAn6IePU6bvhT645bkR4xrwW-F8aDlPXeFnbCrNHClmA2T2zSuyZXt9oFSSaBxCijE8w3WnLmX9K1Xhu8w0hpIJEZL9BeE/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFgbqb1MupfLlkhBtfPYkxkUpAMs2_JEtDNJJoe9ebq97bBh2JycaIMx9L3u3jXihyphenhyphenhccuMP3vOtpH-Igt1oeY5S6dh-8X3-bBKT-BNvhtcrq2zYhkUxU1tUSjNhJETLPbnHfB2J21jk/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLnX9h5A3V1Nre0Xwi7f3pATRs1xgrKQBaOwc1Vsj9-Kwzs1PCf-zH6A7VKabkgwgg-vQ_UebOusu032A1RTHEO1CuU6iYNvYOewdvbeWBiOPed9lcYt2eXmaoQALRt4WFCgcRf6ggO0/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOA3gW6WHjUq_UFc99OYMS1zD57osy0hVHY40suayAfUQp9QMHk9PownjawfyIeCO7hJA4bgQia3f6xEEu1aMhxgr6-5nXCOmQnkV8nRmYURpaYQCnzq9Vn0eoHjTt6fVGMX_bStlA7_g/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv3SUOsd48-EPowNOzex-NrNyAxGeg3IvQpnbpoDfHlW0shnPhKSVEISTtgQpno7jijhYZy28C_TpeANvjHQnh-ex0CRbx9-DL8h-qaAqZy4ZJaPKs7cJbL8Z9TOEiRuXUQ5KsSQlt-vw/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYy9l0UyxZvOoPJ3jXv_-IvX7Xlg6e30FCL74WoV6Ej3HNKmth4VoJWOkJ_GSJ3z2vhkS33qJlSRHygIjxnEm985c9Ncmp13LA-cTyHfRNN_a2rOHS45Bml-DED-oi0oD4DMQ0kHvw6Q/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7v93YvVQFgcPKJbmAThhPucwEQhCd6cTDxPoAgJt95WgHBw3dTulOtfzINevkdX5xOxsFSvuOQ27DD1ZJcsPchYQtS3GpEK3CvRud7gCOPgtZflzb36sOKBbWc6ggZDAOAkwSEKcKy0/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNm9B4AdOxWHvjN6iz9XrCZITxVJNNIeUMcjwLrEqAx6E4jXFvIL4cNh5DxJgVS_Royq8XuSZbj4YOFqxr85fsOwd7nFIrrERZA-jPZ7cGiNR0Sd9pt-0DdhNv62SsHYRcRSf4urc_BGA/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QMvYPJrnseyymirB_IvH4WMciAwbXmu7qeisuHZZSsee9IwNGFBJpC4dat9H1P7vbyFG0V_xw_Lveb_GpIelSDcvB-ClQMbnrIfQf4wDA4wuuWOuHQL1fHuYoNaK0SUOeDI4rZ2CAzQ/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 AbMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqbFvUXYTYqctATYHLRQTnORdOkorjLxoMwSvJzCKj6h3T8sLVM1lRafMD0NV0zfOe1tqor2A1zxzFR30e6thDUqW9JYiIIBAJ1xIBnlVrN1-u0aVf50rBYdam3hmx0h2H3Eyu1ooNUec/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 AbMetroMenu">
<a href="http://abitalita.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhcqemgvspNOjQcuL0n-56QtyRSJPgmb7YQpgnVGNu82IBqhLOBfkL_wb-KmX-aSgXtjyEZDQlCUv2i0VJ0JSgkEb6oPCP3CbleWxGGhJXJvOO7errSBKfE8VWOOa_u9HYdP1o0wndC9F/s1600/ab.png" alt="" />
<span class="light-text">Abitalita</span>
</a>
</div>
<!-- End AbMetroMenu -->
</div>
<!-- END Abmetromenu -->

Demikian cara membuat menu navigasi merto ui diblog,semoga bermanfaat dan bisa difahami.
Terima Kasih atas kunjungan sobat. salam...

Posted in: Solusi Blogger