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:

notify info pictures


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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Informasi Pemberitahuan Lengkap Dengan Icon Logo
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. bookmark dulu mbak Dev, terima kasih
    klo untuk tulisan "info, warning, error dll" bisa diedit ga mbak??

    BalasHapus
    Balasan
    1. lihat pada HTML, misal seperti ini

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


      perhatikan teks yang saya tebalkan Judul Informasi, silahkan diganti dengan teks sesuai selera.

      Hapus
    2. wokeh mbak Dev, saya bungkus bawa pulang, terima kasih mbak Dev

      Hapus
  2. Kalau saya lihat sih, informasi pemberitahuan di atas warnanya cocok kalau warna latar blognya warna terang.

    BalasHapus
    Balasan
    1. pada tampilan DEMO, warna latar blognya gelap tuh mas, jadi tergantung yang menggunakan mau edit backgroundnya.

      Hapus
  3. warna ijo terlihat lbh seger dimata, sesegar klo liat devy ,,,, ciaaaaaaah ,,,,, x-)

    BalasHapus
    Balasan
    1. tetapi masih kalah seger dengan es doger buatan mas Fiu, hehe..

      Hapus
    2. hehehe ... brrti klo devy minum es doger bsa makin seger donk diliat ,,,hehe

      Hapus
  4. icon logo icon logo yang penuh warna dengan berbagai pilihan bentuk dan model membuat tak tahan untuk menyimpan dan kelak kan ku pakai jika dibutuhkan, apalagi salah satu blog kelolaan saya teh berwarna warni, sangat cocok jika kemudian menggunakan salah satu icon logo dari sini nih.
    keren adminnya deh ih

    BalasHapus
  5. Izin copy scriptnya ya mbak Dev. bagus nih untuk menandai artikel yang penting

    BalasHapus
  6. cocok banget nih buat pemberitahuan, ijin kopi kode dan menggunakannya yia bos...

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK