Yeay,akhir nya post juga nih udah lama gak update tutorial tutorial blogger lagi
okay sekarang gw update yah,sekarang gw bakalan bahas metro menu windows 8 ada yang udah pake windows 8 disini? atau mungkin masih pake windows xp? hahahaha XD
kebanyakan udah banyak yang pake yah,nah kalau kalian udah pake windows 8 tau donk menu di sudut kanan nya,liat gambar di atas arahkan ada kursor nya ke sudut kanan muncul kan?
nah,itu dia yang akan gw bahas hari ini
menu tersebut akan di kreasi kan sehingga jadi lah menu metro tersebut bisa di pasang di template kalian,dari pada penasaran yuk liat demo nya
Yuk langsung aja pasang
1.login ke blogger
2.pilih edit html
3.letakkan kode di bawah ini di atas kode
]]></b:skin
.metro-menu {
background: #000;
bottom: 0;
list-style: none outside none !important;
margin: 0 !important;
padding: 20px 0 0 !important;
position: fixed;
top: 0;
transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
width: 76px;
opacity:0;
}
.metro-menu.left {left: -60px;}
.metro-menu.left:hover {left: 0;}
.metro-menu.right {right: -60px;}
.metro-menu.right:hover {right: 0;}
.metro-menu:hover {
right:0;
opacity:1;
}
.metro-menu > li {
background-position: 50% 10px;
background-repeat: no-repeat;
cursor: pointer;
height: 84px;
position: relative;
text-align: center;
}
.metro-menu li > a {
color: #FFFFFF;
display: block;
font-family: "Segoe UI",arial,helvetica;
font-size: 11px;
line-height: 1.2 !important;
padding: 61px 0 10px;
text-decoration: none;
}
.metro-menu > li.home {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfZkNZfsleUbbB8i1-jtfISHKHPyar5feXazbDah7_Zwbi7O7gYagbvKJiAso8PIrGod_6qcx18PnZOLyJqfe7_pUEJp1if6ic-zFoP4WVoV7h8RI8BWlbplkplkFf8CtpSyBbXtFiu3p/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcolLxCEjlzkWbUu4iB057Zv-U8GVccpv8gC0Slz8Shs2Q8S5G5b1vguewaRu38nsgcTwoVCsKToyIvOH7f9BNhtJuBOGqN5gP6LrGPdtpWUAtn6s5Q0OuApJuBTy7Xdh9K5Dkx3tii1P/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUidBsM4xTDdDxVdiZmJ4wkYqC1xdH3sdBWQ3adq2PmpuZbhujvY7QrMh1ttstMxgbZ-9EuNnzZ_xsohWp9aU1s83WsXTiD0RF93A9qbOvU9gr80pGZtqQIFY_34MPlmczT4B8fIzTG4cs/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4nlnBhtpiaKmWBNvfNU95mTaRsh5GoweO_SHTBOktUnPdtKOuGWMn_L7bao-1XgKfCBNv3nAiqESSlE2UQd2Z3UJmUZZ8gGJyQhrQCyq_Hb-z4dYfcCdaTp7jvya5yCWtcPYGV9bGVzH/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutYWh2KVLD9SiVY80NpMdYfTUE6eFCFzmy4xD76Aj9KAKm85HJT5JuuBGMhsoMeH06IzcE62v_wKhedtOCosLkxSlsET67UG2IY7C1w6hpke2nmnk1WOdl1UcLxLcX_IQoFssRUl6kry9/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}
4.letakkan kode di bawah ini di bawah kode
<body>
<ul class="metro-menu left">
<li class="home"><a href="#">Home</a></li>
<li class="refresh"><a href="#">Refresh</a></li>
<li class="download"><a href="#">Download</a></li>
<li class="back"><a href="#">Back</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
menu di atas berada di sebelah kiri,kalau kamu merubah nya kesebelah kanan rubah tulisan left menjadi right
contoh:
<ul class="metro-menu left"> " menjadi " <ul class="metro-menu right">
see you
source
