Membuat Pesan Alert Dengan Font Awesome

Membuat Pesan Alert Dengan Font Awesome

Membuat Pesan Alert Dengan Font Awesome

infoalya.com

Update postingan malam hari, sahabat info alya jika sebelumnya saya pernah memposting tentang membuat pesan alert di postingan blog maka kali ini intinya juga sama tapi yang ini menggunakan font awesome. Berikut langkah-langkahnya :

Login dengan akun masing-masing dan jika sudah di dashboard pilih template kemudian edit HTML
Copy dan paste kode dibawah ini tepat diatas ]]></b:skin> atau </style>

.posting{max-width:620px!important;width:100%;margin:15px 20px 15px 0px;}#blog-pager{margin:1.5em 0;}
.error,.notice,.info,.success,.warning{display:block;font-style:normal;padding:15px 18px 15px 48px;position:relative;border-radius:4px;color:#333;border-bottom:1px solid rgba(0,0,0,.1);margin-top:1em;margin-bottom:1em;}
.error,.notice{background-color:#F5A9A9;}
.info{background:#DFE7FE;}
.success{background:#CCFEBF;}
.warning{background:#F7BE81;}
.error:before,.notice:before,.info:before,.success:before,.warning:before{font-family:'fontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.18);font-size:24px;line-height:1;}
.error:before,.notice:before{content:"\f057"}.info:before{content:"\f05a"}
.success:before{content:"\f14a"}
.warning:before{content:"\f06a"}

Berikutnya masukkan stylesheet berikut diatas tag </head> jika pada template anda sudah ada, lewati langkah ini

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

Jika dalam template sudah terpasang font awesome seperti kode diatas (berapapun versinya) maka tidak perlu sobat pasang yaaa...
Simpan template jika langkah-langkah diatas telah selesai

Untuk penerapan pada postingan blog gunakan kode dibawah ini

<div class="info">Pesan Info</div>
<div class="success">Pesan Sukses</div>
<div class="warning">Pesan Warning</div>
<div class="error">Pesan Error</div>

D E M O



Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×