إنضم لنا

Membuat tampilan warning untuk blogger





Membuat tampilan warning


Seperti apa tampilan warning   ini hanya tamplilan warning ajah, bisa di ibaratkan ini adalah notifikasi ,

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

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail