Cara Membuat Metro UI Navigation Menu

Cara Membuat Metro UI Navigation Menu

Navigasi

Apa menu METRO UI?

Jika anda pernah membuka antarmuka Microsoft Windows 8, atau rentang baru dari Windows ponsel Smart, maka menu METRO UI ini bukanlah hal yang baru bagi mereka. Menu ini terinspirasi dari antarmuka navigasi Windows 8. Jika anda belum tahu, silahkan lihat screenshot berikut.


Cara Membuat Menu Metro Windows 8 seperti dalam Blogger?

Langkah-langkah yang disebutkan di bawah ideal bagi blogger yang memiliki pengetahuan yang kurang tentang HTML coding. Petunjuk berikut sangat sederhana sehingga siapapun dapat dengan mudah menerapkannya. Ikuti petunjuk berikut ini dengan benar.

Langkah # 1: Menambahkan CSS Stylesheet:

Login ke Blogger.com >> Template >> Pilih Edit HTML.
Sekarang cari kode tag di template ]]> </ b: skin> dan paste kode CSS di atasnya berikut.
Setelah selesai simpan perubahan.

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; }

Langkah # 2: Menambahkan METRO Menu dalam Blogger:

Sekarang tempatkan sesuai keinginan anda dimana anda ingin menempatkan menu ini. Tempat yang ideal adalah di bawah header. Oleh karena itu, paste kode berikut di mana saja Anda ingin melihat menu ini di situs/blog Anda.

<!-- 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/AVvXsEipSgiYOlVoWnbeNCQXnYQYlHYelw7o0b7ymrjBWVtgLj5X3beVnVrVeYmLAfYIrNGJeaTb8yEKs0koiOEymzdC9dJb8GXLHm5GbTJoA8kLEwP9bkHdZlmh5Jsox8WJiOhr-dGlS7D8ZTo/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/AVvXsEhqTrHqYZXilZJHSucnHTTv43uLImXWQ_JTWjfmJFs-9ZVwQnYuQZXKOruQvprnhCFaptthyphenhyphenhwgz3cRwsFJelZ1K1_Q5-uSVxjfd_6cpHjfA6ksz8svA_AuKAWUNiLktJzxUUXuEOYwSjs/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/AVvXsEiPwJnnSObVwD8Bo9nRvhARVuZcI22IBXtrBASuRdj6mGGuJ-v3ToiHztm0223DSbvoP77XFax0bfhGFzTPKme_dTKv3Abbg_7546wueRN7wEgDBNns-lZUe7XbW_Ul7fH7IYw4P1xFPhw/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/AVvXsEjf3ufDw0ZId6Yy647kRurrLWga1ZkML2T9nErTqIN9c71LQJdFmptwW7ywJIohn8l9j-Y-cf8YAjT-HdZBi5D7A3tIJ1qcPjXTyyeBEqif5m7mpljEtg5x1J4qNSfMT43ravvmeC6VpIg/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/AVvXsEjGvNv_wWIuGggTU7yBqlB7maKZXtlbOz6uLRlw_a3z6_egxhClR7whyCVqnP2myfvHTm3fVyzs0SjAiAwzrXpZ8d1hz7PEV3S-B6vlul10edzIYuYmuL_IB1DeAuxZPhzVn9GN_2FroFM/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/AVvXsEhz0iuPokt_nGaykX40xWDHHJ-1s_JjHOOqe8bpuu7TQwiPIq6Wc-3gmG80Qe5jCQjnwTt2jI4AFibPciqf7ZzWggTJjp4ciHMB84kzf_c0JUEpGGrYjPlwH78t3HSp7V3ee60oBygj_FU/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/AVvXsEj9wUdgRM4GNm-dcjfFGZaBDBAbMXB-9VavmDGx2rbw6x_JzavnnssvapjRmUvYgwK3f3gRUtcyVA1T5RlicpjRnzRnN-sdus_Dps6zadu7_pcEDVTLVp_GH3iAzl5uIuPqn_f6uVp8Qxo/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/AVvXsEiE_sZ_lN-nSdlyHmVbH2rvJrYb_fMTbQ8Ir0hE4Yo4GGJa8CFIXEhRccV09XEuxyuIYRZk-jJBQsGB8JPSiKjBAdGLJGc9mWlyHslKryOSM831JLuNEKhzbpku8or2jhN_Mm7D4mF1_jQ/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/AVvXsEi6a4Ws9CeVGjPrmQHS7CDDO58OGLVVU8mbWOj2V9M0euIEBsNj7IqdJpqL8kV1DLQkLhZxAMHXFLIAma9NzjdixTIuUz4cFiQbjpU-3YQ4fVJVynuZgNTB9wq-j0NgbC8tojtjqTJgpJw/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/AVvXsEjukvtyQVGtLbBQcQKJgQJXxCdOWB5dZZqttv4dphDnwSEROoYXeipKrD3C4ZvhGugX2Zh65ndlQTYe31IjYV8ei9JznciCoNdiwE7LN_FbchdB6V9rf2pcOYuLhRp1E2AVuZ-sli6tVI8/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://defandaky.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVCs8ZSGWPAhH5pVM_uzrd9WwOAcqrSEqmZugHFDvsUalB67r_pPW6TxGB46B6pHuyVTjYe4_OXalK7CUdELTCNSzGFmoA4mgB7rpw1viSt-6VTpF0-uZ_rcOqUefGGmtb583ER54D1s/s1600/MBL.png" alt="" />
<span class="light-text">Defandaky</span>
</a>
</div>
        <!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->

Note: ubah link yang saya beri stabilo kuning, dan judul link yang berwarna biru.

Semua Selesai: Bagaimana mudah? Nah, itu saja. Responsif Windows 8 terlihat seperti menu navigasi telah diintegrasikan dalam situs web Anda.
Ingat: Menu ini dapat digunakan pada setiap platform yang mendukung HTML atau CSS yaitu WordPress, Jhoomla dan lain-lain

Artikel Terkait

  • Floating Horizontal Bar Social Sharing untuk BlogSpot
    Situs Jejaring Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang ini setiap Orang akan suka Berbagi artikel bagus dengan komunitas sosial yang menguntungkan setiap orang dan tentunya para penyedia artikel. Ini penting untuk setiap blogger d…
  • Menu navigasi drop down dengan pure CSS3
    Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radiu…
  • Menu vertikal accordion dengan CSS3
    Ini adalah posting pembaharuan dari posting Menu vertikal accordion dengan CSS3 sebelumnya yang sudah usang. Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan …
  • Link aktif di menu dengan tag conditional
    Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada …
  • New AJAX Navigation Menu Widget untuk Blogger
    AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded  widget ini dan menambahkan fitur disesuaikan. Demo Bagaimana kerjanya ? Nah, widget ini bekerja dengan …
  • Menu Rocking dan Rolling Rounded
    Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Demo Download Langsung saja kita lanjut untuk mengupas menu ini…

2 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...