.::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