Masuk pada Edit HTML
Cari kode ]]></b:skin>
Masukan kode Dibawah ini dan simpan tepat diatas kode ]]></b:skin>
.metro-menu {Langkah selanjutnya masih di edit HTML , sekarang cari kode <body> atau </body> dan masukan kode dibawah ini tepat dibawah kode <body> atau </body>.
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/AVvXsEjGWqwDQZx2wwTIxhmo80fdEJrjA-WMecelvHQiR0O88JXASkmFTydFn00vfPTICz1RJQdjlFI1idKjQaITueFSNV_5t8OGg7d53QI8WegyNLRL5FtkSXWWVL7P8HsnDy4Mww0hyphenhyphenWqM5v5J/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojvWsNXtTg4rx1QgNyVGY1WrpR5Y-bbc1uEgK6mF_O8m2K9WRAx_eXHH1YRoYrLu0rIn4WpMOTR37Nb1MTQDV7MG1xyD3kz1iTPWnsRKn321IeQ58oCuKg8fWaxGOpBrxh8bjhAp28nnt/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaVm_Di9ZtHET16UdeMvbZzUyTsInlnn0i_A0y8wyG58iAkoyyDFZ5_eh3Z4-gAFjv9L-6QDXOmtnowyb3O0wia1vuiaKKnyXm-eRXCnchS_WBMhNT9BRHpZ2WsVHwqmP7KH-u-abp6MF/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOK23NhxrLaAMaJVfdtRy75LSLOfB-uc3CzIBYL_-EwB6dxaX3HPX3lu-16WKiffmr5bZpSXe1Hz64DWwAa8_VJPLd5QYsblme8bmUf8kxjAbKeK7xNP_XFW5S8GvZ4W8N9g9N4QWGSuVc/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgO7Sy4ncszoXRN_QF0tZhWaivzkCfNMCtiatx7j7_2QYHXQnTkz-EDGUC-xmjgetSIUdlDTLzbXhT3Ufdq-6MSeoQExAtCfj8pDuM7WBEVPpz6I4icfGk1ShS-fVfCM7mNwApA1SnHiK/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}
<ul class="metro-menu left">Posisi menu diatas berada di sisi sebelah kiri , kalau sobat ingin menempatkan menu di posisi sebelah kanan rubah tulisan left menjadi right .
<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>
Contoh : " <ul class="metro-menu left"> " menjadi " <ul class="metro-menu right"> "
Semoga besaril
[sumber]
