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 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 Home Random Post Site Map Follow Contact Me Jika anda terlanjur menggunakan FontAwesome versi dibawah 4.0 anda bisa mengganti penulisan font pada HTML diatas, untuk format penulisannya seperti ini 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