Cara Membuat Metro Charm Bar Menu di Blog

Primonymous - Membuat Metro Charm Bar Menu di Blog ~ Untuk yang menggunakan Windows 8, pasti tidak asing lagi dengan yang namanya charm bar menu. Charm bar menu akan muncul saat kita arahkan kursor ke sudut kanan atas (info selengkapnya tentang charm bar bisa dilihat di http://windows.microsoft.com/en-us/windows-8/charms-tutorial), kali ini kita akan membuat fitur tersebut di blog kita.

Demo

Cara Pasang

1. Log in ke Blogger >> Template >> Edit HTML
2. Cari kode ]]></b:skin>
3. Masukan CSS berikut 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/AVvXsEiIVp4iqb-xnIArhcM4z5rPWCp3AxCBCt9QCnrmWCW6gn85KeAhNRJAXfDW69zU2YANXXMkOmf2yez2_FuDKBlgKqTBhaBBZ8vBX3Tzg3CGq5wOTJ7nB4EGMiipHLYAvYTgGU0AXDMA7OmB/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3Bh7Yx0nnwE_ss69wGfmiS9iQDwH_Vp9Da14MEzA_zQHvH-R0Tr5BKKuX4lI6CwLhYKOVQ0nwPKEUjA_hxpkIgxFj9ngwQkBMXyl3hBZj5MhS09JmQBRVLF71efJo7Ju6mYCofl_9Af-/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaP8QHPKqc9BTr8I8FEw4mQPLZf6oIRlOo0KsXH3cfAFDrw7Nx0SXPy-qcGWLEn4XHoia3Jbk-YcsZto-zBMxxnYgE0y1AYj8k2qngsayUQY3nKzdskBpVWcINLYyadxptm2kL6HXvUnXj/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5lCp7EpEWZ67K9jS3IS9NJBALIpD0sFiEhwRmZwo9OE4DNygj_mTrSAqynBL0tsdQeD2wgcL4vEYEuxgvvVL-RvdF3BuaXWLjHb7fmiujv5lBEWnh7kEbe7LKFQORqCyHvSyDqf-Koai/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtdkKMha4iCG_B7R-Kf4paZdMP27k7DkhQZS-RHxNZ4Ss9vFUW_z4vwXTtCKNXCYaCO0ax6Qqti3wzC5Alh6zCIkhAs1C-AiQ0yYDizmAey9w3r01OHvYCDckqLS-ESnxeGtJZ5kYni_b/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}

4. Cari kode <body>
5. Masukan kode berikut tepat 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>

* Untuk mengubah posisi charm bar ke kanan, ganti left menjadi right

6. Simpan template.

Demikian artikel tentang Cara Membuat Metro Charm Bar Menu di Blog, semoga bermanfaat..

referensi: http://duniaradioku.blogspot.com/2013/09/memasang-metro-menu-css3-untuk-blogger.html