Cara Menciptakan Metro Charm Kafe Sajian Di Blog
- Membuat Metro Charm Bar Menu di Blog Untuk yang menggunakan Windows 8, pasti tidak abstrak lagi dengan yang namanya charm kafetaria menu. Charm kafetaria hidangan akan muncul ketika kita arahkan kursor ke sudut kanan atas (info selengkapnya perihal charm kafetaria sanggup 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 instruksi ]]></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/AVvXsEhejTFj7QGMgjfZ6_TdurSGDMXj7pq2csw_A5yHhIJwXtJPbyx0g9AullZINhf5wLuieqgEEyuxH6jr5JC_3Dyldx2d-9iMBnriuzwPJelA4GU1d6XtAKmIb1VTpLwKzGp6t2uTCVK9sXFb/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMAggvAnxDyC5glMq9tuqa9FjWu6NdxHDqDcvIrReCIhILcql5FO45_AmpP8RW5BEdiD1Cbx-VQ4IZ4XyZH4tXOvO58QVLP1rG2kOPuQIx_gv5DvM8ei9oManTVhQkteUxH_lU_GdVrFh/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje-0q6VEm2HFJUJSu1UzvtvN1Tqeul2W5jlgxVpn6GxX2wgEZ5PXcX4b52oa5zzmJxKHWlEdwPHVVzemXGHilZLnpvL3DL1J3ZEL5Q7fJgMC2lgw1Me0q5uUKXltHwfgGnfBCqr0ruaFC/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhX3q-UEvKka-bydscmfDmZIUQXAccx9xhtQUlt3gCipwrRGVpb4eup-Lou3ZAcnfZiJOXv8yCPACmiEIwL6H-rc43XIFhlFhw2ZrUDFovtv6l65kmzjlQq9dSPptl76FHScyXnLdkYcVK/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJpdIGho1riWnZY0m9QcgG_Fg3awqMNNozgc9vzvrRnRFDPuWn1UQ8dVH_LC6SObiJDYLlsl-NpASUsFLu4an8AGoxebVD-6JmIt8Ip9C81E7casf8rHFbNDS3MBvP2W4x4SyQ4vxtiZB/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}
4. Cari instruksi <body>
5. Masukan instruksi berikut tepat di bawah instruksi <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 kafetaria ke kanan, ganti left menjadi right
6. Simpan template.
Demikian artikel perihal Cara Membuat Metro Charm Bar Menu di Blog, supaya bermanfaat..
referensi: https://berkatilmu21.blogspot.com/search?q=memasang-metro-menu-css3-untuk-blogger
Belum ada Komentar untuk "Cara Menciptakan Metro Charm Kafe Sajian Di Blog"
Posting Komentar