Flat UI Download Button Awesome

Flat UI Download Button Awesome - Layaknya multiple button download CSS3 yang saya share pada artikel sebelumnya dengan memanfaatkan font awesome icon untuk mempercantik tampilan. Menerapkan pseudo element dengan CSS value content sebuah icon awesome untuk membuat sebuah tombol button download yang lebih modern dan menarik seperti Flat Menu UI Efek Flip CSS3. Dan tentunya juga akan terlihat lebih bergaya dengan konsep metro ui style dalam sebuah Flat Template Portfolio Design.

• DEMO

• VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

.vn-red a{
background-color:#e74c3c;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-red a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-red a:hover{
  background:#2c3e50
}

HTML

<div class="vn-red" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>

Anda cukup mengganti tanda # dengan URL yang ingin dimasukkan

PENTING...!!!

# Install CSS kodenya sebelum kode :

]]></b:skin>

# Untuk menampilkan button dalam postingan blog cukup masukkan HTMLnya di mode HTML
# Untuk pilihan warnanya silakan klik VIEW CODE

Demikian semoga bermanfaat dan Happy Blogging

Flat Menu UI Efek Flip CSS3

Flat Menu UI Efek Flip CSS3 - Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI, Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu Metro UI Awesome.

Silakan lihat demonya dibawah ini :

• DEMO

• VIEW CODE

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

nav ul {
  min-width: 600px;
  position: relative;
  display: table;
  margin: 50px auto;
  clear: both;
}

nav ul li {
  list-style: none;
  float: left;
}

nav ul li a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 10px;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
          perspective: 600px;
}

nav ul li .front {
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .front {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
     -moz-transform: rotateX(0deg) rotateY(180deg);
      -ms-transform: rotateX(0deg) rotateY(180deg);
       -o-transform: rotateX(0deg) rotateY(180deg);
}

nav ul li .back {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  text-align: center;
  z-index: -1;
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
     -moz-transform: rotateX(0deg) rotateY(-180deg);
      -ms-transform: rotateX(0deg) rotateY(-180deg);
       -o-transform: rotateX(0deg) rotateY(-180deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .back {
  z-index: 1;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
}

nav ul li i {
  line-height: 100px !important;
  color: white;
  vertical-align: middle !important;
}

nav ul li span {
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 300;
  line-height: 100px;
  color: white;
  text-transform: lowercase;
  vertical-align: middle;
}

nav ul li.color-1 .front,
nav ul li.color-1 .back {
  background-color: #3498db;
}

nav ul li.color-2 .front,
nav ul li.color-2 .back {
  background-color: #2ecc71;
}

nav ul li.color-3 .front,
nav ul li.color-3 .back {
  background-color: #1abc9c;
}

nav ul li.color-4 .front,
nav ul li.color-4 .back {
  background-color: #f39c12;
}

nav ul li.color-5 .front,
nav ul li.color-5 .back {
  background-color: #34495e;
}

HTML

<nav>
    <ul class="panel">
        <li class="color-1"> <a href="#">
                <div class="front">
                    <i class="fa fa-windows fa-4x"></i>
                </div>
                <div class="back">
                    <span>HOME</span>
                </div>
            </a>

seterusnya.......

        </li>
    </ul>
</nav>

Silakan anda kreasikan sendiri sesuai kebutuhan agar tampilan lebih maksimal, dan untuk HTML kode selengkapnya bisa dilihat di View Code ...!!!

Enjoy Blogging

Drop Down Menu Metro Ui Awesome

Drop Down Menu Metro Ui Awesome - Setelah sebelumnya saya pernah share artikel tentang Menu metro ui modal dialog dan widget menu metro ui drop down sliding yang masih menggunakan gambar sebagai icon, namun kali ini saya mencoba menyempurnakan tampilannya dengan kombinasi menu metro ui dan font awesome. Karena saya lebih suka tampilan gambar yang relatif sedikit pada halaman blog, agar konsep blog metro ui style lebih maksimal. Untuk panduan cara kostumisasi font icon awesome versi 403

Sebagai gambarannya seperti dibawah ini :

• DEMO

CSS

.samsury-tab1{background:#ea6153;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
    position:relative;
    background:none;
    width:500px;
    height:90px;
    border:none;
    margin:20px auto;
    padding:20px;
float:left;
}
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:relative;
    top:30%;
    font: 14px Segoe UI, Helvetica, Arial, sans-serif;
    color:#fff;
}
ul.navi:hover {
    height:200px;}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(90px);
    -ms-transform: translatex(90px);
    -o-transform: translatex(90px);
    -webkit-transform: translatex(90px);
    transform: translatex(90px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(180px);
    -ms-transform: translatex(180px);
    -o-transform: translatex(180px);
    -webkit-transform: translatex(180px);
    transform: translatex(180px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(270px);
    -ms-transform: translatex(270px);
    -o-transform: translatex(270px);
    -webkit-transform: translatex(270px);
    transform: translatex(270px);
}
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:100%;
    height:200px auto;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
        width:80px auto;
       height:80px;
       position:absolute;
       left:0;
      top:0;
      z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}
ul.navi > li:hover ul {
    opacity:1;
    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(90px);
    -ms-transform: translatex(-70px) translatey(90px);
    -o-transform: translatex(-70px) translatey(90px);
    -webkit-transform: translatex(-70px) translatey(90px);
    transform: translatex(-70px) translatey(90px);
}

ul.navi li:hover ul li.c {
    -moz-transform: translatex(2px) translatey(90px);
    -ms-transform: translatex(2px) translatey(90px);
    -o-transform: translatex(2px) translatey(90px);
    -webkit-transform: translatex(2px) translatey(90px);
    transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(74px) translatey(90px);
    -ms-transform: translatex(74px) translatey(90px);
    -o-transform: translatex(74px) translatey(90px);
    -webkit-transform: translatex(74px) translatey(90px);
    transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
    -moz-transform: translatex(146px) translatey(90px);
    -ms-transform: translatex(146px) translatey(90px);
    -o-transform: translatex(146px) translatey(90px);
    -webkit-transform: translatex(146px) translatey(90px);
    transform: translatex(146px) translatey(90px);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:36px;color:#fff;padding-top:15px;}

HTML

<div class="samsury-metro-menu">
<ul class="navi">
 <li id="n1"><a class="samsury-tab1" href="#" > <i class="fa fa-th-large"></i></a>
<ul class="sub">
 <li class="l"><a class="samsury-fb" href="#"><i class="fa fa-facebook"></i></a></li>
 <li class="c"><a class="samsury-tw" href="#"><i class="fa fa-twitter"></i></a></li>
  <li class="r"><a class="samsury-g" href="#"><i class="fa fa-google-plus"></i></a></li>
  <li class="r1"><a class="samsury-in" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" ><i class="fa fa-download"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><i class="fa fa-file-o"></i></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><i class="fa fa-music"></i></a></li>
 <li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><i class="fa fa-picture-o"></i></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#"><i class="fa fa-cogs"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><i class="fa fa-wrench"></i></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><i class="fa fa-volume-up"></i></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><i class="fa fa-power-off"></i></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#"><i class="fa fa-list"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><i class="fa fa-random"></i></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><i class="fa fa-sitemap"></i></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>

Anda cukup mengganti tanda # dengan url yang ingin di tampilkan, dan untuk font icon selengkapnya bisa anda kunjungi Font Icon Awesome V 4.0.3

Kostumisasi Font Icon Awesome V.4.0.3

Setelah sebelumnya update font awsesome versi 3.2.1 maka kali ini sekalian memperbarui penggunaan font awesome versi 4.0.3 berikut cara kostumisasi baik pewarnaan maupun pengaturan posisinya untuk blog metro ui style. Jika anda belum menggunakan versi ini silakan install kodenya :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

EFEK ANIMASI

 <i class="fa fa-bell fa-2x fa-spin"></i>
 <i class="fa fa-bell fa-3x fa-spin"></i>
 <i class="fa fa-bell fa-4x fa-spin"></i>

EFEK WARNA

 <i class="fa fa-twitter-square"></i>
 <i class="fa fa-facebook-square"></i>
 <i class="fa fa-linkedin-square"></i>

EFEK BORDER

<i class="fa fa-twitter-square fa-border"></i>
<i class="fa fa-facebook-square fa-border"></i>
<i class="fa fa-linkedin-square fa-border"></i>

BUTTON

CSS BUTTON

i.fa-cogs {float:center;padding:10px 92px 10px 92px;background:#34495e;border-bottom:5px solid #2c3e50;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-camera {float:center;padding:10px 92px 10px 92px;background:#1abc9c;border-bottom:5px solid #16a085;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-bars {float:center;padding:10px 92px 10px 92px;background:#2ecc71;border-bottom:5px solid #27ae60;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-calendar {float:center;padding:10px 92px 10px 92px;background:#9b59b6;border-bottom:5px solid #8e44ad;border-radius:4px;
font-size: 36px;
color:#fafafa;
}

Demikian sedikit ulasan tentang kostumisasi font awesome v.4.0.3.
Enjoy Blogging

Multi Button Download Metro UI

Multi Button Download Metro UI - Sesuai pembahasan artikel sebelumnya button icon unik animasi css3 yang masih seputar blog metro style , kali ini saya akan memberikan lagi tips blog membuat tombol multi download metro ui dengan efek animasi CSS3. Tombol ini sangat cocok sekali buat kalian yang menyediakan file download dengan berbagai format sebagai contoh video dengan format misalnya 3gp, mp4, mpeg, dan lain - lain. Untuk tampilannya seperti dibawah ini :

• DEMO

Untuk penggunaannya sebagai berikut :

CSS

.download {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 2em auto;
    width: 100%;
    height: 60px;
    line-height: 60px;}
.download h1 {
    position: absolute;
    color: #fff;
    font: 0.6em;
    line-height: 60px;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #4f2c68;
transition: margin-left .6s cubic-bezier(.1, .7, .2, 1);}

.download:hover h1{
    margin-left: 98%;}

.download ul {
    display: inline-block;
    margin: 0;
    padding: 0;}

.download ul li {
    position: static;
    display: inline-block;
    padding: 0 .2em;}

.download ul li::before {
    display: none;
}

.download ul li a {
    color: #fff;
    font-size: 1.4em;
    margin: 0;
    padding: .3em .6em;
    background: none;}
.download-info{
    background: #16a085;}
.download-info h1{
    background-color: #1abc9c;}
.download-danger{
    background: #e67e22;}
.download-danger h1{
    background-color: #f39c12;}
.download-success{
    background: #27ae60;}
.download-success h1{
    background-color: #2ecc71;}
.download-warning{
    background: #8e44ad;}
.download-warning h1{
    background-color: #9b59b6}

HTML

<div class="download download-info">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-danger">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-success">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-warning">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

Anda cukup mengganti tanda # dengan link url download yang ingin anda tampilkan dan pilih salah satu untuk HTMLnya.

Demikian tips blog metro ui style kali ini semoga bermanfaat
Happy Blogging

Pesan Alert Metro UI Dengan Font Awesome

Pesan Alert Metro UI Dengan Font Awesome - Mengembangkan gaya metro style tentunya menjadi hal yang unik untuk sebuah blog. Mulai dari widget unik, menu metro ui, maupun element - element yang bernuansa blog metro ui style. Setelah artikel sebelumnya tentang kombinasi menu metro ui dengan Fontawesome, kali ini saya akan memberikan contoh penerapan font tersebut ke bentuk pesan alert box. Ini sebagai kelanjutan dari pesan alert metro style sebelumnya. Hanya saja saya sedikit menambahkan tombol close dengan  efek jquery slide up.

Sebagai gambarannya silakan klik demonya.

• DEMO

Penggunaan dasarnya adalah sebagai berikut :

CSS

.alert { padding: 19px 15px; color: #fefefe; position: relative; font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif; }
.alert :before {
content: "\f05d";
font-family: fontAwesome;
font-size: 30px;
font-style: normal;
background:transparent;
color: #27ae60;
top: 0;
left: 0;
padding: 19px 19px;
position: absolute;margin-right:10px;
}
.alert .msg { padding: 0 20px 0 40px;}
.alert p { margin: 0;}
.alert .toggle-alert { position: absolute; top: 7px; right: 10px; display: block; text-indent: -10000px; width: 20px; height: 20px; border-radius: 10px;background: #222; }
.info-box { background: #444 }
.success-box { background: #444 }
.error-box { background: #444 }
.download-box { background: #444 }

JQuery

jQuery(document).ready(function() { $(".alert .toggle-alert").click(function(){ $(this).closest(".alert").slideUp(); return false; }); });

HTML

<div class="info-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="success-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="error-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="download-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

Kostumisasi Alert Icon Font Awesome :

Info   : "\06a" color: #3498db
Error : "\05c" color: #e74c3c
Sukses : "\06a" color: #27ae60
Download : "\01a" color: #8e44ad

Silakan sesuaikan tampilan pesan dengan mengubah kode value content dan color iconnya

Demikian Pesan Alert Metro UI Dengan Font Awesome  semoga bermanfaat dan menambah semangat kita untuk terus menulis yang bermanfaat bagi para pembacanya.
Enjoy Blogging

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;}
#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.

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

Update Icon Font Awesome V. 3.2.1

Update Icon Font Awesome V. 3.2.1 - Untuk melengkapi artikel yang masih bernuansa blog metro ui style, kali ini saya memberikan contoh versi terbaru Icon fontAwesome versi 3.2.1. Untuk versi terbaru ini lebih lengkap dari versi sebelumnya  V.3.1.1, dengan icon - icon yang bisa kita terapkan untuk menggantikan gambar dengan icon unik ini. Dengan begitu kita sudah mendapatkan 1 point untuk optimasi SEO blog yaitu mengurangi http request untuk mempercepat loading blog.

Jika sebelumnya anda menggunakan versi :

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Ganti dengan versi terbarunya dengan ini :

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

Untuk penerapannya di blog masih sama, dibawah ini contohnya :







Untuk penulisannya :

<i class="icon-windows icon-1x"></i>

<i class="icon-windows icon-2x"></i>

<i class="icon-windows icon-3x"></i>

<i class="icon-windows icon-4x"></i>

<i class="icon-windows icon-5x"></i>

Daftar list lengkapnya silakan anda kunjungi Font Awesome V.3.2

Demikian tentang icon font awesome semoga aktivitas blogging jadi lebih indah dan menyenangkan.
Happy Blogging