Membuat tampilan warning untuk blogger
Membuat tampilan warning
Kalo kalian ingin melihat tampilanya seperti di bawah ,
Yah untuk melengkapi postingan blogger ajah gan soalnya ini ga penting penting banget ko saya posting di sini siapa tau temen temen ingin memasang nya di bloger cuma kalo menurut saya sih ini penting ga penting yah hehe cuma kadang butuh juga untuk membuat arikel seperti tutorial
Yang kadang harus memberi peringatan agar tutorial dapat di pahami dengan seksama
Berikut codenya
CSS
HTML
Cuma itu yang bis saya search hari ini semoga bermanfaat
Kalo kalian ingin melihat tampilanya seperti di bawah ,
Yah untuk melengkapi postingan blogger ajah gan soalnya ini ga penting penting banget ko saya posting di sini siapa tau temen temen ingin memasang nya di bloger cuma kalo menurut saya sih ini penting ga penting yah hehe cuma kadang butuh juga untuk membuat arikel seperti tutorial
Yang kadang harus memberi peringatan agar tutorial dapat di pahami dengan seksama
Berikut codenya
CSS
[class^=notification] {
margin: 4px;
float:left;
position:relative ;
padding: 0px 15px 0px 20px;
border-radius: 5px;
border: 1px solid;
}
[class^=notification] p {
padding-left: 18px;
margin: 5px 0;
}
[class^=notification] > p:first-child:before {
font-family: FontAwesome;
position: absolute;
font-size:24px;
left: 10px;
margin: -2px;
}
.notificationNote {
background-color: #D5EEF8;
color: #2183A5;
}
.notificationTip {
background-color: #DDEFD7;
color: #308935;
}
.notificationExample {
background-color: #DDDDDD;
color: #2B3139;
}
.notificationWarning {
background-color: #F2DEDB;
color: #992222;
}
/* Icon choice for notification divs */
.notificationNote > p:first-child:before {
/* "i" in a circle */
content: "\f05a";
}
.notificationTip > p:first-child:before {
/* Hand pointing right */
content: "\f00c";
}
.notificationExample > p:first-child:before {
/* Binoculars */
content: "\f05e";
}
.notificationWarning > p:first-child:before {
/* Exclamation mark in triangle */
content: "\f00d";
}
HTML
<div class="notificationNote">
<p>Dalam proses
</div></div>
<div class="notificationTip">
<p>Berhasil.</p>
</div>
<div class="notificationExample">
<p>Belum di konfirmasi</p>
</div>
<div class="notificationWarning">
<p> Gagal!!</p>
</div>
Cuma itu yang bis saya search hari ini semoga bermanfaat
