Informasi Pemberitahuan Lengkap Dengan Icon Logo

Informasi Pemberitahuan Lengkap Dengan Icon Logo - Bentuk informasi pemberitahuan seperti ini sama dengan blockquote info, namun pada blockquote belum dilengkapi dengan icon logo. Box informasi seperti ini akan sangat berguna saat Anda ingin menyisipkan beberapa informasi penting dalam tulisan posting Anda, maka pesan tersebut Anda hiasi dengan border sebagai tanda untuk menjelaskan bahwa tulisan ini merupakan informasi penting sebagai pemberitahuan bagi mereka yang membaca. Cara Membuat Border Judul Artikel Blog adalah salah satu bentuk box informasi yang paling mudah dikerjakan, karena box info seperti ini semakin berkembang kini tampilannya sudah saya memodifikasi lengkap dengan icon logo seperti gambar berikut:

Sebelumnya beberapa bentuk box informasi pemberitahuan dengan tampilan yang berbeda-beda bisa Anda jadikan alternatif pilihan untuk menghiasi pesan teks Anda dengan ragam efek style seperti:

1. Cara Membuat Tabel Box Untuk Menyimpan Tulisan
2. Memberi Bayangan Dengan Efek Curva Pada Box
3. Membuat Pesan Informasi Dengan Blockquote
4. Konten Light Box Dengan Tombol On Off

Buat sahabat semua pecinta SAHABAT BLOGGER 77, teks informasi Anda akan saya lengkapi dengan 5 icon logo. Anda bisa pilih model mana yang akan Anda sisipkan dalam postingan Anda nanti dengan gaya tampilan seperti ini:




DEMO SHOW



Bagaimana.? lebih keren dan menarik bukan.!
Jika ingin mencoba, cukup pilih style mana yang akan Anda gunakan untuk menampilkan informasi pemberitahuan dengan label yang sudah saya pisahkan sesuai dengan nama logo masing-masing pada CSS dibawah ini:

.notify {
  position: relative;
  height: 42px;
  font: normal 13px/normal Verdana,serif;
  margin: 15px auto;
  border-radius: 4px;
  box-shadow: 0 0 10px #111}

.notify span {display: block;margin-left: 50px;}
.notify span:nth-child(1) {font-weight: 700;}
.notify i {
  position: absolute;
  left: 0px;top: 0px;width: 40px;
  height: 50px;font-size: 32px;text-align: center;
  line-height: 50px;vertical-align: middle}

/*INFO*/
.info i {background: #84b9f9;color: #003d65;text-shadow: 0px 1px 1px #fdfeff}
.info {
  color: #004d7e;
  border: 1px solid #318eff;
  background: -moz-linear-gradient(top, #cae2ff, #97c6ff);
  background: -webkit-linear-gradient(top, #cae2ff, #97c6ff);
  background: linear-gradient(to bottom, #cae2ff, #97c6ff)}

/*SUCCESS*/
.success i {background: #a1d28f;color: #0b6f01;text-shadow: 0px 1px 1px #edf8e9}
.success {
  color: #0d8801;
  border: 1px solid #6dc84d;
  background: -moz-linear-gradient(top, #cdecc2, #ade09b);
  background: -webkit-linear-gradient(top, #cdecc2, #ade09b);
  background: linear-gradient(to bottom, #cdecc2, #ade09b)}

/*WARNING*/
.warning i {background: #f6c058;color: #66501e;text-shadow: 0px 1px 1px #ffefcf}
.warning {
  color: #7a5f24;
  border: 1px solid #ffa803;
  background: -moz-linear-gradient(top, #ffdd9c, #ffcb69);
  background: -webkit-linear-gradient(top, #ffdd9c, #ffcb69);
  background: linear-gradient(to bottom, #ffdd9c, #ffcb69)}

/*ERROR*/
.error i {background: #f98888;color: #923e3e;ext-shadow: 0px 1px 1px #fff}
.error {
  color: #a44646;
  border: 1px solid #ff3535;
  background: -moz-linear-gradient(top, #ffcece, #ff9b9b);
  background: -webkit-linear-gradient(top, #ffcece, #ff9b9b);
  background: linear-gradient(to bottom, #ffcece, #ff9b9b)}

/*QUESTION*/
.quest i {background: #008080;color: #40E0D0;text-shadow: 0px 1px 1px #585858}
.quest {
  color: #ddd;
  border: 1px solid #008080;
  background: -moz-linear-gradient(top, #6495ED, #008B8B);
  background: -webkit-linear-gradient(top, #6495ED, #008B8B);
  background: linear-gradient(to bottom, #6495ED, #008B8B)}

Sebagai contoh - misal Anda ingin menggunakan tampilan QUESTION STYLE, maka kode INFO, SUCCESS, WARNING dan ERROR dihapus saja, selanjutnya salin kode elemen kelas pada masing-masing CSS diatas dengan HTML berikut:

<div class="notify info">
<span>Judul Informasi</span><span>Tulis Pesan Informasi Anda Disini...</span>
<i class="fa fa-info-circle"></i>
</div>

<div class="notify success">
<span>Judul Informasi</span><span>Tulis Pesan Informasi Anda Disini...</span>
<i class="fa fa-check-circle"></i></div>

<div class="notify warning">
<span>Judul Informasi</span><span>Tulis Pesan Informasi Anda Disini...</span>
<i class="fa fa-exclamation-triangle"></i></div>

<div class="notify error">
<span>Judul Informasi</span><span>Tulis Pesan Informasi Anda Disini...</span>
<i class="fa fa-times-circle"></i></div>

<div class="notify quest">
<span>Judul Informasi</span><span>Tulis Pesan Informasi Anda Disini...</span>
<i class="fa fa-question-circle"></i></div>