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:
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:
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:
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:
- Cara Membuat Tabel Box Untuk Menyimpan Tulisan
- Memberi Bayangan Dengan Efek Curva Pada Box
- Membuat Pesan Informasi Dengan Blockquote
- 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:
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
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 >>
bookmark dulu mbak Dev, terima kasih
BalasHapusklo untuk tulisan "info, warning, error dll" bisa diedit ga mbak??
lihat pada HTML, misal seperti ini
Hapus<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.
wokeh mbak Dev, saya bungkus bawa pulang, terima kasih mbak Dev
Hapusizin nyimak kak :)
BalasHapusKalau saya lihat sih, informasi pemberitahuan di atas warnanya cocok kalau warna latar blognya warna terang.
BalasHapuspada tampilan DEMO, warna latar blognya gelap tuh mas, jadi tergantung yang menggunakan mau edit backgroundnya.
Hapuswarna ijo terlihat lbh seger dimata, sesegar klo liat devy ,,,, ciaaaaaaah ,,,,, x-)
BalasHapustetapi masih kalah seger dengan es doger buatan mas Fiu, hehe..
Hapushehehe ... brrti klo devy minum es doger bsa makin seger donk diliat ,,,hehe
Hapusicon 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.
BalasHapuskeren adminnya deh ih
Izin copy scriptnya ya mbak Dev. bagus nih untuk menandai artikel yang penting
BalasHapuscocok banget nih buat pemberitahuan, ijin kopi kode dan menggunakannya yia bos...
BalasHapus