Pesan Alert Dengan Font Awesome Part 2

- October 01, 2017

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='//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 this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

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

 

ketik dan enter untuk mencari