Pesan Alert Dengan Font Awesome Part 2

Pesan Alert Dengan Font Awesome Part 2

Pesan Alert Dengan Font Awesome Part 2

infoalya.com

.::infoalya.com::. Hi, sahabat infoalya.com kali ini admin ingin berbagi tips yang sebenarnya sudah pernah admin share dulu tapi ada sedikit tambahan dan konsep penerapannya di blog juga sama, disimak yaa  😉

Langkah awal pastikan sobat sudah berada di template editor, lalu temukan ]]></b:skin> atau </style> kemudian paste kode dibawah ini tepat diatasnya

.catatan,.info,.warning,.tips,.update,.error{display:block;font-style:normal;color:#333;padding:15px 18px 15px 48px;border-bottom:1px solid rgba(0,0,0,0.1);position:relative;border-radius:3px;margin:0 0 10px;color:#FFF} .catatan:before,.info:before,.warning:before,.tips:before,.update:before,.error:before{font-family:"FontAwesome";display:block;position:absolute;top:15px;left:16px;font-size:22px;line-height:1} .catatan:before{content:'\f11d'} .info:before{content:'\f05a'} .warning:before{content:'\f071'} .tips:before{content:'\f028'} .update:before{content:'\f085'} .error:before{content:'\f057'}.catatan{background-color:#5C97BF} .info{background-color:#FF9531} .warning{background-color:#B25A5A} .tips{background-color:#FAD163;color:#000} .update{background-color:#69A24A}
.error{background-color:#FA5858}

Selanjutnya tempatkan stylesheet berikut tepat diatas </head>

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

Bagi yang sudah pernah memasang font awesome di blog tidak perlu pasang lagi yaa

Untuk penerapan pada blog silahkan gunakan kode dibawah ini

<div class="catatan"> Catatan </div>

<div class="info"> Info </div>

<div class="warning"> Warning </div>

<div class="tips"> Tips </div>

<div class="update"> Update </div>

<div class="error"> error </div>

untuk demo bisa dilihat dibawah ini 👇

Catatan
Info
Warning
Tips
Update
error



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!

×
×
×