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

Modern Drop Down Button CSS3

Seperti halnya multi download button sebelumnya kali ini saya memberikan contoh button drop down dengan css3 agar tampilan blog lebih maksimal.
Dan tentunya lebih modern mengusung tekhnologi framework bootstrap dengan gaya blog metro ui style.

• DEMO

Untuk element pembentuknya sebagai berikut :

CSS

<link href='https://sites.google.com/site/samsurysites/modern-button/modern button.css' rel='stylesheet' type='text/css'/>

JS

<script src='https://sites.google.com/site/samsurysites/modern-button/modern button.js' type='text/javascript'/>

JQUERY

<script type='text/javascript' src='jquery-1.10.2.min.js'></script>

FONT

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

HTML

<div class="m-btn-group">
  <a class="m-btn green"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn green dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

<div class="m-btn-group">
  <a class="m-btn purple"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn purple dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

<div class="m-btn-group">
  <a class="m-btn red"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn red dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

<div class="m-btn-group">
  <a class="m-btn blue"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn blue dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

<div class="m-btn-group">
  <a class="m-btn black"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn black dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>

Silahkan pilih sesuai dengan warna yang ingin ditampilkan.

Hide Footer Widget Dengan Slide Toggle

Hide Footer Widget Dengan Slide Toggle - Mungkin ini bisa dikatakan sebagai kelanjutan efek toggle animasi jquery ui dengan konsep blog gaya metro ui style, namun ini skaligus sebagai jawaban dari sahabat Ubay Nyzhar yang nanyain cara membuat footer seperti blog ini. Fungsi dari slide toggle ini adalah untuk menyembunyikan element agar halaman lebih ringkas dengan bantuan Jquery. Untuk cara pemasangan di blog sebagai berikut :

Masukkan Jquery sebelum kode </head>

JQUERY

<script type='text/javascript' src='jquery-1.10.2.min.js'></script>

Jika sebelumnya sudah memasang jquery berapapun versinya bisa melewati langkah ini.

Kemudian tambahkan sedikit CSS berikut ini sebelum kode ]]></b:skin>

CSS

#show-button{padding:0;background:#555;color:#3498db;cursor:pointer;display:inline-block}
#show-widget{display:none;text-align:left;background:#555;color:#fff;padding:0}

Cari lagi element footer widgetnya misalkan #footer-widgets atau #footer-wrapper, karena setiap template bisa saja berbeda maka cari kode yang mirip2 saja. Lalu letakkan kode dibawah ini tepat dibawahnya.

JS

<script type='text/javascript'>$(document).ready(function(){$(&quot;#show-button&quot;).click(function(){$(&quot;#show-widget&quot;).slideToggle()})});</script>

HTML

<div id='show-button'>TOMBOL SHOW/HIDE</div>
<div id='show-widget'> WIDGET YANG AKAN DISEMBUNYIKAN</div>

PENTING...!!!

1. Tombol show/hide bisa diganti dengan icon Font awesome baca disini
2. Widget yang akan disembunyikan pada area footer biasanya IDnya seperti ini :

<b:widget id='HTML1' locked='false' title='Support' type='HTML'>

kemudian tutup dengan kode </div> pada akhir widget.

Demikian sedikit tips blog kali ini, semoga bisa membantu khususnya buat mas Ubay Nyzhar

Contoh Efek Efek Jquery UI

Jquery User Interface ( UI ) merupakan plugin tambahan dari jquery sebagai pengembangan javascript yang dirangkum sedemikian rupa untuk lebih mudah di gunakan dalam pengembangan website/blog. Kita hanya memerlukan sedikit kode untuk menghasilkan efek yang mengagumkan sesuai perkembangan website saat ini layaknya blog gaya metro ui style.

• DEMO

Install Jquery UI

<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Dibawah ini adalah contoh perintah untuk menjalankan efek dengan JQuery UI :

BLIND

$('#object').toggle("blind", {
    direction: "horizontal"
}, 1000);

BOUNCE

$('#object').effect("bounce", {
    direction: "up",
    times: 10
}, 1000);

CLIP

$('#object').toggle("clip", {
    direction: "horizontal"
}, 1000);

DROP

$('#object').hide("drop", {
    direction: "up"
}, 1000);

EXPLODE

$('#object').hide("explode", {
    pieces: 36
}, 1000);

FOLD

$('#object').hide("fold", {
    size: 10
}, 1000);

PULSATE

$('#object').effect("pulsate", {
    times: 2
}, 1000);

PUFF

$('#object').hide("puff", {
    percent: 300
}, 1000);

SCALE

$('#object').toggle("scale", {
    origin: ["top", "left"]
}, 1000);

SIZE

$('#object').effect("size", {
    to: {
        width: "50%",
        height: "20%"
    } }, 1000);

SHAKE

$('#object').effect("shake", {
    times: 7
}, 1000);

SLIDE

$('#object').toggle("slide", {
    direction: "left"
}, 1000);

TRANSFER

$('#object').effect("transfer", {
    to: "#foo"
}, 1000);

PENTING...!!!

Contoh perintah Jquery

$('#object').hide(durasi);

Setelah menggunakan Jquery UI

$('#object').hide("Efect", {opsi1, opsi2, opsi3}, durasi);

Object     : Obyek yang ingin dieksekusi
Efect       : Nama efek untuk menampilkan dengan JQuery UI
Opsi        : Tambahan perintah dengan nilai value misalnya (direction, times, size,width dsb)

Silakan berkreasi dan bermain - main dengan Jquery Ui ini agar tampilan blog lebih maksimal, sesuai slogan blog metro ui style.
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