Memasang Metro Menu CSS3 Untuk Blogger - Pada kesempatan kali ini saya akan kembali berbagi sebuah menu " Metro CSS3 " yang cukup atraktif untuk melengkapi tampilan sebuah template . Metro menu dengan CSS3 ini akan terlihat ketika kursor diarahkan di samping kiri atau kanan template. untuk lebih jelasnya silahkan brada lihat demonya dibawah ini

See Demo


Menanggapi berbagai komentar yang kebingungan akan demonya saya mencoba sertakan screenshotnya . Pada screenshot diatas (gambar A) ketika kursor belum diarahkan kesisi sebelah kiri dan pada ( gambar B ) setelah kursor diarahkan kesisi sebelah kiri . Artinya Metro Menu akan muncul ketika kita mengarahkan / meletakan kursor kesebelah kiri template. Mudah-mudahan penjelasan ini tidak membingungkan lagi y hehe.

Kustomisasi 

  • Masuk pada Edit HTML 
  • Cari kode ]]></b:skin> 
  • Masukan kode Dibawah ini dan simpan tepat diatas 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/AVvXsEjEqKG3OXRlwnr4TkbJ7XaQ7doRoSBJFOgLl2Js26zp3BPOGPSn8Kv9z6Q_H2VwqVnodv4Re-VUuru4MwYjy7-w5Msdx8OCi9fXvlcGz_Dk5eiclIks8p_DE6lhOuRKSe9EcJ5hGldkb1QM/s1600/home.png");
}
.metro-menu > li.refresh {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZyRyY2WODPHn1SHEHUO0QhsBMfdVwo3DxJUGEObU2vePL6V18Fxaww68Mz5oB4uUMOMyQe1b6aAM1qSEVKgD09FiwG05DvAvZ27e1PMH54KhujsHavgGxHeRwvamz07X78irNNiNj0Lpu/s1600/refresh.png");
}
.metro-menu > li.download {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxz_XOlL8UZ_ybrCH2gEoH0laIgfkg1yrDb5kQHT-HZ1J-GrkTOhH8pRxzU5jXE_yYFEkPqIzLCASZOyWBI1pnv9PupzqnMTHUlvCERsFbHpj3FqFDWGTg0w4uciL2wKUSQ1N2zOGKie9l/s1600/download.png");
}
.metro-menu > li.back {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0Pu1TEzyIK9J9-3mgWPOVCgnDiHvAqrTZR61UrXYLrf5ZqNExqEH0CzJqt97sTy04bpDe76dqZbx1tQckaqaFTcHuW1NF2-nkMbzE1VxogOLbc5upkc448qzfRvXgS4RDFIToGPpSgDH/s1600/back.png");
}
.metro-menu > li.next {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTntlcWqbGBFWP7L88ptlvspYVjInQE5z3KPUr6-9SuotrbUm3-zMlCzBLk1wqS3HgxZOn41f_lelTrGpUSjNpv2iquVU7DhLjhFKDUPdo841c1l5dMvUmn7KwFDGN31XfDjMxQKSzWNP/s1600/next.png");
}
.metro-menu > li:hover {
    background-color: #232323;
}
Langkah selanjutnya masih di edit HTML , sekarang cari kode <body> dan masukan kode dibawah ini tepat dibawah 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>
Posisi menu diatas berada di sisi sebelah kiri , kalau sobat ingin menempatkan menu di posisi sebelah kanan rubah tulisan left menjadi right .
Contoh :  "  <ul class="metro-menu left"> " menjadi " <ul class="metro-menu right"> "

Tutorial