Cara Membuat Metro UI Navigation Menu di Blogger Blog - Hallo Sob Jody Blog, artikel kali ini berjudul Cara Membuat Metro UI Navigation Menu di Blogger Blog, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara Membuat Metro UI Navigation Menu di Blogger Blog
link : Cara Membuat Metro UI Navigation Menu di Blogger Blog

Cara Membuat Metro UI Navigation Menu di Blogger Blog

Cara Membuat Metro UI Navigation Menu di Blogger Blog

Apakah Anda bosan dengan menu navigasi Blog Anda? Apakah ada yang ingin merubah menu navigasi menarik nya ke Windows 8 Menu Metro Style? 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, adalah penting untuk memiliki Menu Navigasi elegan dgn gaya yang menarik, untuk memberikan lebih banyak variasi menu untuk pengguna Blogger. Jadi jika sobat tertarik sebaiknya lihat dulu demo berikut ini

D E M O

Apa METRO menu UI?

Jika seseorang memiliki pengalaman antarmuka dari Microsoft, Windows 8 atau ponsel Windows Smart, maka menu METRO UI V bukanlah hal yang baru bagi mereka. Menu ini terinspirasi dari antarmuka navigasi Windows 8.



Dimana Menu Metro UI Akan Muncul?

Itu tergantung dimana anda akan meletakkan menu ini karena sangat fleksibel yang dapat mengambil bentuk dari setiap tema atau template. Namun, akan ideal jika ada tempat menu ini di bagian atas Blog, pengunjung dapat dengan mudah melihatnya.



Cara Membuat Menu Metro Sperti Windows 8 di Blogger?

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



Langkah # 1: Menambahkan CSS StyleSheet:



Pergi ke Blogger.com Template >>.

Pilih Edit HTML + Lanjutkan



Sekarang Silahkan Cari ]]></b:skin>

Letakkan Code berikut diatas ]]></b:skin>

Berikut Kodenya :

/*===KC METRO UI Menu==*/

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

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

/* 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 ingin menempatkan menu ini. Tempat yang ideal untuk menu ini yakni tepat di bawah header. Oleh karena itu, paste coding berikut di mana saja Anda ingin melihat menu ini di situs Anda.



Berikut Codenya

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

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft KcMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKAruV5bhQv3cN-pycayME7XN_-8gw1VrDcoOvtUYWK1V_kHZmMIJ7wZRUfihaMfC-MKlUJLs_gc9oFvEUWeeecbI6yQjH5X9fJzDI6WUp21AmxmZ195HOym8lG_ueI8_HA0HHRcShyphenhyphens/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwuFik_WlBWew47w8stUszX0v_kg9u1Tnc1ubGkFPB-Nbg67dqoA8tiOqV0bLXBrs5HxJh8uxrvUS0ciKXyjma6xVAbXsp_ymX4j-gCbvIbPZKHuR5gfy_S53wLy0a9p9tAQZfdvuqC0/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qDnAivhWflhJo1NFCmmMEB188qQ8iJTwuL9H3DDXlC1UoWcraBtoPy0fM_2PBsANx-qZWAFnJQ6cUDhyphenhyphen6JBLZmrM15Au0PJryqzbSKgWWS5hfbfQk-E4YPgRwk8YllOUSJ887gHJUGc/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0OleO91q29OtX3uETYbUPA4ebXhfSEbtH3b2XMFhJxjt1YnSneKn0QsXmYJoqmk8oj6FQwrKK2Abovfy_FqW2bD4QbmlGA5pSpR7nke2cQ9N2RabaDcwpuZASzEHoXFCn6iuNnSU_1dE/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEialQISjS-bls4ceEo5ZXZ4MgHE2QWq_Z9uT5tkhD4fZjcU2YrpRMz7NDhwO-GlDOF_UkV7K0yJWlT8IzDsxaz0hYYY9Ob20H2daFuL-eirNizW5gttm1vsbgX3rv4tN74UkUoouwZdheA/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjr9xEBM1phs3iMBuoMd6bcNpph3JhFUp2pmsYT4hLb4sFJj35OoJR-GpV2cwvPdyA_XPNHM224w0NLpqsklUgQZi0PfeSgt4BJLT6mnmxH9hh4kNytyBLICF14LRmxA8j7A7EJLCdtU/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHrk5ecL6xKOZ-dKrSDvi3eZYfJPOrSZ7Lv03dAdFu6sU-gJQwUKkfwUGrlpy1aZuaobelZxAh-tBUA7BtLCZ-1Uy6i347OecLKLIyIUPzMfebUiqF7E_vi8UuetfVtAZU_X1Gs_ikJ9s/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVmCANhCZkrLDim1h-vETa0IZlPbMxSXFmBk86JSROM-eJBe54-YRuXJhwxWaeTICTUcxUwawlDNn3wSCRMy2WzZ9luhk9zb7q2zYvMJLhsfUb686NOkoeW7QPlEtl54nk72YxkhZzOk/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmOsbidhWkqnHp1KxeLvMu0MHnZufZXuFUwCWgUztGSaQ0MMVaI_jOhC8jY4F1eKLOlsa__SV1-z4S9cBdmvKOTyV9kciRFbCAzmT-iS5ymjQbCDbxj_vQfZIs5f842d197ddYIWyRsjc/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 KcMetroMenu">
<a href="Masukkan Link disini" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxXKpJSYn1WLPvCsKBW5ccWH8OmWArSiGANixQyck1wLqbyL-LkBZqRNYZ6lydNExY5AYef7QEPaRQkSfpYS1TUAU8KVCxb50eGqXsgCaSCx2T-FvMrrzKQ9zACQI9gEeQ0YfIJrdqf4/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 KcMetroMenu">
<a href="http://www.kumpulancara.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAXr9-L-s7ETf8_YYYMn2AdyHZgd4rjhstx_FCO7pK0V2WYQLPQKaB-4j0gu4n7RtISOU0KsksVNlgFYRfvv3lRCBokQmhmRCMZZfNDmPN-zvQMa9bKRv0Pic1sr1wQcuhySwrzWsUhQH/h120/kc.png" alt="" />
<span class="light-text">KC</span>
</a>
</div>
<!-- End KcMetroMenu -->
</div>
<!-- END Kcmetromenu -->

Selesai:

Menu ini dapat digunakan pada setiap platform yang mendukung HTML atau CSS yaitu WordPress, Jhoomla dan lain-lain

Semoga Bermanfaat

Demikianlah Artikel Cara Membuat Metro UI Navigation Menu di Blogger Blog

Sekian Cara Membuat Metro UI Navigation Menu di Blogger Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara Membuat Metro UI Navigation Menu di Blogger Blog dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/12/cara-membuat-metro-ui-navigation-menu.html Semoga artikel ini bisa bermanfaat.

Tweet