Membuat Metro UI Navigation Menu di Blogger

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

Lihat 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!