Dokumen ini membahas tentang penerapan kombinasi menu Metro UI dan Font Awesome versi 4.0.3 untuk blog gaya Metro. Penulis menyertakan berbagai efek CSS3 untuk meningkatkan tampilan dan interaktivitas menu navigasi. Terdapat juga instruksi untuk mengganti penulisan font jika menggunakan versi Font Awesome sebelumnya.

1. KOMBINASI MENU METRO UI DAN FONT AWESOME
Kombinasi Menu Metro UI Dan Font Awesome - Menerapkan efek - efek unik untuk
menu blog rasanya tidak akan habis untuk dibahas, seperti menu navigasi metro ui
dan menu metro ui efek modal dialog. Ini sebagai pengembangan blog gaya metro
style dan FontAwesome seperti artikel sebelumnya tentang FontAwesome Icon
V3.2.1. Namun kali ini saya tidak menggunakan versi ini melainkan versi
terbarunya versi 4.0.3 yang dikombinasikan dengan CSS3, agar penerapan template
blog metro style lebih maksimal.
DEMO
Untuk dapat menggunakannya silakan install font awesome versi 4.0.3 sebelum kode
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet"/>
CSS
.wrap{width:95%;margin:0 auto;}
#menu {margin-bottom: 10px;}
#menu a { float: left;display: block;color: #fff;text-decoration: none;text-
align:center;}
#menu a i {
font-size:36px;
display:block;
text-align:center;
padding-top:30px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me
{
margin-right: 3px;
height: 120px;
}
#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{
margin-right: 3px;
width: 11%;
/* padding-top: 115px;*/
padding-left: 20px;
padding-right: 20px;
/* height: 35px;*/
}
#menu a.home {
background: #27ae60;}
#menu a.random-post {
background: #e67e22;}
#menu a.sitemap {
background: #2980b9;}

2. #menu a.follow {
background: #8e44ad;}
#menu .contact-me {
background: #16a085;}
/* CSS3 Effects */
#menu a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#menu a:hover {
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
#menu a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
@media (max-width:768px){
#menu a i{
font-size:16px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me{
height:73px;
}
#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{width:22%;}
}
HTML
<div class="wrap">
<div id="menu">
<a class="home" href="#"><i class="fa fa-windows"></i>Home</a>
<a class="random-post" href="#" ><i class="fa fa-random"></i>Random
Post</a>
<a class="sitemap" href="#"><i class="fa fa-sitemap"></i>Site Map</a>
<a class="follow" href="#"><i class="fa fa-users"></i>Follow</a>
<a class="contact-me" href="#"><i class="fa fa-envelope-o"></i>Contact
Me</a>
</div>
</div>
Jika anda terlanjur menggunakan FontAwesome versi dibawah 4.0 anda bisa
mengganti penulisan font pada HTML diatas, untuk format penulisannya seperti ini
<i class="icon-windows"></i> dan seterusnya.

3. Demikian tips blog metro ui style kali ini, semoga bermanfaat dan memberikan
inspirasi untuk terus mengembangkan blog dengan gaya terkini. Happy Blogging