Cara Membuat Metro Charm Bar Menu di Blog


Membuat Metro Charm Bar Menu di Blog

PrimonymousMembuat 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.


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://lh6.googleusercontent.com/-Qs_96uX2oA8/UZ542GsXzAI/AAAAAAAAFLo/FaJuHHgadZo/s1600/home.png");
}
.metro-menu > li.refresh {
 background-image:url("https://lh4.googleusercontent.com/-A3j9EOfDzQ4/UZ542-ha8ZI/AAAAAAAAFL4/WXPWmuZYGB8/s1600/refresh.png");
}
.metro-menu > li.download {
 background-image:url("https://lh6.googleusercontent.com/-IoupHIYPQM4/UZ542yZELRI/AAAAAAAAFL8/MIKmf_8gBpY/s1600/download.png");
}
.metro-menu > li.back {
 background-image:url("https://lh3.googleusercontent.com/-m3MPcT_fwFo/UZ542KrQM5I/AAAAAAAAFLk/DUCK6BCylww/s1600/back.png");
}
.metro-menu > li.next {
 background-image:url("https://lh3.googleusercontent.com/-Fel2-Bjck3s/UZ542imCK9I/AAAAAAAAFLw/7WzUfRX-q34/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

14 Responses to "Cara Membuat Metro Charm Bar Menu di Blog"

PEDOMAN KOMENTAR
> Usahakan berkomentar sesuai artikel ^o^
> Dilarang menggunakan kata kasar!
> Dilarang menyisipkan link aktif
> Dilarang merokok, eh..

Stay away from drugs! Because you can't full enjoying the music without full conciusness.

Primamulia Teguh ✔