Menu
 
» » » Membuat Metro UI Navigation Menu di Blogger

A+ A-
Selamat tahun baru 2013 semuanya!
Dalam tutorial kali ini tidak ada yang berbeda dari yang sebelumnya ya itu tutorial tentang OW (Oto Website), perbedaannya hanyalah gaya, judul, dan isi saja. Untuk kali ini Oto Website akan membahas dan berbagi tutorial dengan tema Membuat Metro UI Navigation Menu di Blogger. Ini adalah sebuah menu yang sekarang sedang ramai di bahas oleh para blogger sedunia. Menu yang tampilannya mirip sekali dengan Windows 8.
Bagi Anda yang pernah menggunakan atau melihat antarmuka dari Microsoft, Windows 8 atau rentang baru ponsel Windows Smart, maka menu ini METRO UI bukanlah hal yang baru bagi Anda.
Banyak sekali fitur yang di sediakan dari  Metro Menu Navigasi UI untuk situs web blogger.
Untuk lebih jelasnya tentang  Membuat Metro UI Navigation Menu di Blogger silahkan Anda liha Screensoh berikut dan live demonya.


Screenshot


Live Demo





Cara Membuat Windows 8 seperti Menu Metro di Blogger?
Kemunculan atau peletakkan menu ini tergantung dari Anda, jadi intinya terserah Anda ingin meletakkan menu ini dimana? tapi idialnya navigation menu letaknya di atas bagian blog Anda.
Kode-kode yang disebutkan di bawah ini adalah kode ideal untuk Membuat Metro UI Navigation Menu di Blogger, jadi silahkan Anda salin dan letakkan di situs web/blogger Anda.

Langkah # 1: Menambahkan CSS StyleSheet:

/*===OW METRO UI Menu==*/

 body {
  font-family:sans-serif;
 }
 a {
  text-decoration:none;
 }
 .OWmetromenu {
  width:960px;
  margin:auto;
 }
 @media screen and (max-width:960px) {
  .owmetromenu {
  width:100%;
  }
 }

 /* OWMetroMenu */
 .OWMetroMenu {
  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 OWMetroMenu */

 /* 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 di Blogger:

Sekarang itu sepenuhnya tergantung pada Anda di mana Anda ingin menempatkan menu ini. Tempat yang ideal penambahan adalah tepat di bawah header. Oleh karena itu, paste coding berikut di mana saja Anda ingin melihat menu ini di situs Anda.

<!-- OWmetromenu -->
 <div class="OWmetromenu">

 <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFFeH0DwyHKfCPTCDDgu978I5k6GN3cYHvUekzfaWZ89_qnU0qb-eowi_JhQlvJ1l4g13AJIQoSLwhwTKPA9pzgEOmWfB5K1kDUEq2xYLjfJRZ3QQYCUw83AjmTa-sUPp01wt9xYX7Q/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBU8CBfvVIS0StG7gG-QLh-bIGM4XurDB2NjhcahKgvgLsTuj0gKUp6kB4GnjJOGGXZIvTTraQ6KdRRdOorczpUT-cvMiMmUhKLzGVO1qvpbJztBxoh7DkebsTiNqS5UepmDYjjlvamw/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZIJva3VsWBGX8uRhjnBokKroZQJs9cMMp-T78r03VsKFFLhzMQur3_SgRWAkjh86c_X4nKczvQp0nq-W7MAD2lOwEtwXzUVX8IMA6gf5q6y8ORqs8GQU_isx27XdRjzS7AHtgQuAwvg/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFX53hn5fqLJvyC4_4knl_LUu9sgEH_NBhvwpjvBs9CdZyxHUAneo6F0gq-iSV60Nb-z_4uB0rTJGc2MZBvQnmwSTo9X7A2aRQYueQzxeYNAaeoNAIU3S6_VKVl67c2delc4BOmGn5A/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QrBamxje5PY35YdiOvbC3S8iNEj07zrn_i8j7lNJnCHuP3qtyYjaicu0d9f2OchzNDCx1j2EtVS0sA8YxVJfCdJMwv3nXPR9WJLZHPrLJ6hO4cskKGQ3qqKuEs2_WeiPoljjJNMZwA/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikqAFBWzF6SUs9wBdzFTPDcFJ3ZWQwNa_t0Hz24Q0Yd4R-UYZ2NNeLUZaje7hGbcyDDZMWfFlBtkTLl-DrZN6wn0qDutjVQHb00ZwOVHa4ajEj3kRAmxjxRReuAjOnTscuXLNyN5jsIeY/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oKHV8EM1yi12u_sOfS2Y8kPCezW0rgwLhl4IWrT4h7peFV3lITmYqeLXNvjaF8JzGZ_Ux3LWtNBKqkGJMQ_L3dzoW3wLxLDZlNLorDMmcYdwGTFoH_pAxLMTAg7sr7Ql8rVeMOnruA/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8C6jj14VVk4aDaGzfefk8W4fOkPofy9oGxSrqlwWMtmzG62cwwKEP-8ivTR953x4-Q7QXL-Jz4aGfRLUygQ3PGoC_RSPf08MYw9TfMSH8jW0zbacplhrxW2ZMpAYgqCiW_ZVxQCJxJA/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8M3q6I6aV4yKBia5P15fJwbszNp_hPl-Kwhu-bclNUAqNNtJJtI5pG9oYdQ1CLZSgD5r68ya5xq4XXVKBBjnmYCydCy48inpqFQIVCPVXVxjzKSnCYGd7ZpSm93EC6s6CKo_doP23qQ/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 OWMetroMenu">
 <a href="#" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0O_s2iBBlBkOkK1UWWzhplbniRa9ceHpfrHKFGSopi6-DF_eIRvuNfboWvK6UBoSF-9sAtweM6yw7nFGb-N3SsJDBdZInMLtpkwmIX32IpqMkjO8E4kTY0cBvPvTgMYUfx3pHelSMVw/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 OWMetroMenu">
 <a href="http://www.otowebsite.blogspot.com" class="gradient">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlROMZqDhw0A6ygpb81aH08RbegQvU-59t3GCqJebryF3IWDrN7vvnn6WSyQDZoxSvzUngqWlJQrkvFeIOO2v7EhU6CDMfdDNRvyyiHusaPIdjn6Ju9KBw4oxUr8LPcNtTYbb-SBTn3w/s1600/OW.png" alt="OW" />
 <span class="light-text">Oto Website</span>
 </a>
 </div>
         <!-- End OWMetroMenu -->
   </div>
 <!-- END OWmetromenu -->

Finish : Sekarang Anda dapat mempriview atau menyimpan hasilnya dan silahkan lihat bagaimana dan apakah menu ini telah berhasih Anda terapkan pada situs atau web blog Anda!


Dari Meja Editor
Saya harap Anda tidak mengalami kesulitan dalam tahap pemasangannya, tapi jika Anda memerlukan bantuan atau kesulitan untuk Membuat Metro UI Navigation Menu di Blogger jangan sungkan untuk bertanaya, InsyaAllah saya akan secepatnya membantu Anda!
Diposting oleh
Label: ,

Share to:

di 03.26

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif

Langganan: Posting Komentar (Atom)
 
Top