Windows 8 Style Menu Blog - Kali ini saya akan share satu menu cantik dan elegant ala windows 8 yang bisa diaplikasikan langsung ke blog anda . Menu ini bernama Metro Ui dengan desain ala Windows 8 Shortcut .

Untuk tampilan nanti akan seperti pada gambar dibawah ini , dan untuk melihat live demonya , silahkan klik tombol demo .

Mengenai fungsi dari menu navigasi di sebuah website itu sudah tidak perrlu dipertanyakan lagi yakni untuk memudahkan akses para pembaca ke setiap halaman di blog kita .
Nah jika anda ingin menerapkan menu ini di Blog , ikuti langkahnya dibawah ini

Cara Memasang Menu MetroUi
1. Masuk ke Blog
2. Pilih menu Template
3. Edit Html
4. Cari kode ]]></b:skin>
5. Letakkan kode css ini diatasnya
Css

/*===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; }

6. Selanjutnya tambahkan kode dibawah ini dimana saja anda inginkan . Lebih recommended dibawah header blog .
HTML

<!-- 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/AVvXsEhTw7Gek-n-hphXz1KLzemLrz9FO_bCaUGUqFiP1da1lrGX61Ws6f2FH-9xittWzpzw2w0Fcj0buOU2tx3i0_QFJV4gRFQy9J7jlD3HGXYMxmj0NR4n8_7F5vMCw6RrB0KgEPc-qYLozjg/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/AVvXsEge5rzEMGt06AyGwEejrD5UR-oxDXmCM3G3EZQ_cGgWe0XaTU5JG3j01EGZUfzlwzam8VmXZfr1hn7LCqFnZK4ehIwGBoLg2HAskaz3hK1lHjWRhnJjcUShvoAHw6geOJpyBwiqXbcKPYg/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/AVvXsEg-VJOdxj32m7VSyBB20cIl5Y2xFuv0n7nCMNgVTtCk95P_UAkV9Rb8GY8QqCvRvP1IOGNrgNt5VBg3BPKTADYAcNNDzR0-BzUg9L6EZmhJ9SKb2R3jwDniFpiMeBgsaXVKGyomVEWPs9c/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/AVvXsEhdweThKd9CK0-jKrTm1ZylEtmY2nycN1D75YX6YJyLq4jp8nl8Jjwt0nqAyR-DnybT3fVP90uDFMwg51tM9IN86R49VpL0bRdMIHxFeDccXYxFJjwWYprlakiaTzK6PE-B8Z6faHYsqbk/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/AVvXsEicHCC8fqqcUA-Dj-fMUJrEBF9DPts1ebynlAAPIO9ppgQhdGqjrkeW1gr0ikptlG9aEqeN-rSDk_c7Tv6-NF2a7hFGa4XfkMkBqVJpfFhkSd8vyJkgXYsMvZ3UKWMLkhoBZtDwzh4Wkw4/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/AVvXsEgUgwmDmCP2_nVGpUr8gh4-LYT85rBV7WG6ILFbGfR0KFgqzftSrW77oTuDlweoA7eE17wwpK5xJ92RLdn3hmWc1ZL7U1KeZLRTPbTGHwZV0Ou4bX5TCQ_fZzcIxrWuau2dCerXJcaPTtQ/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/AVvXsEhr22k4mwoKaBiLTBwXFToJjursuHvj4M9LD0unkvVbbgd4G5KOiqMwXPpYF_cCN87hB3CeebjFD5kevlFh_yse4q-3SCnU0EZkjHzd3rUQpxq9NPTyd_vqkbIrYyDRzlFWBSQQ2HxkGa4/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/AVvXsEjxeQnbOgr5zT14hNM_jHdP1-TqT8bMoqwFgwExP5ZSCdCU0PJQ8wwQX4mB8ovXJy18keENtfW9qrAE_mMyirl14xoNUhiC3tiU6rFkVwKmgWCHM4oblhpdz731RQncoSE7yrUID5C30e4/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/AVvXsEgZGBRFlcLrDoJWSJeFvukGOSFL_CCpRFriK-36ylCSzrJTIzWq-7bexbAAOMhyphenhyphenI2CrSvvUSYTzp3a611q6aok476cFhdpUHuPnUTqfGU-Rf4eRYkQBvOPP9qn6zLVmm7ZwAYNWcxMYH7I/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/AVvXsEixHopDj12QkdlI_nRceEWBKgWtlQEouKu7k70MgVvwZV5WOoWL_H6G3jjU1XdG4U4mQanoBg6c56nyd_P7HN3KPCn_3j2XO6pBu2qmRbTmrccLoN72HUx1DM6bskzsNBlfpGews6aDKyY/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="http://3.bp.blogspot.com/-Ts3oRKLRidw/UhxUsPFuSiI/AAAAAAAAIiY/eTMcQfslHqo/s1600/ab.png" alt="" />

<span class="light-text">Abitalita</span>

</a>

</div>

<!-- End AbMetroMenu -->

</div>

<!-- END Abmetromenu --> 
7. Kemudian simpan template dan selesai .

Untuk HTML nya bisa anda simpan pada menu layout New Gadget - HTML/JavaScript .

Dan semoga Windows 8 Style Menu ini berguna untuk anda .
Ichi Hikaru
2
at Thursday, October 17, 2013

2 comments

avatar
MbahDoyok x
18 October 2013 at 22:16

bagus utk halaman intro :D

Reply
avatar
Ichi Hikaru x
18 October 2013 at 23:38

Hehe iya gan ...

Reply

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih

Subscribe to: Post Comments (Atom)