CSS3 Message Notification Box

CSS3 Message Notification Box untuk Blogger

Kali ini saya akan membagikan Message Notification Box atau Kotak Pemberitahuan Pesan dengan desain yang sangat menarik menggunakan CSS3. Kotak Pemberitahuan Pesan ini dapat digunakan para pemilik Blog/Web untuk menginformasikan pesan kepada pembaca. Pesan tersebut dapat berupa pesan error, pesan sukses, pesan peringatan, dan pesan info dengan tampilan kotak yang berbeda-beda.

Berikut ini adalah tampilan Kotak Pemberitahuan Pesan yang akan saya bagikan :

This is an info message.
This is a success message.
Consider this a warning.
This is an error message.

Untuk mempercantik tampilannya, saya menggunakan beberapa icon dari font awesome. Jadi, untuk Anda yang ingin menggunakan kotak pemberitahuan pesan ini, pastikan telah terdapat script pemanggil CSS Style Font Awesome yang terletak di atas kode </head>. Script yang saya maksud adalah seperti berikut ini :

<link href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika belum ada, silahkan letakkan script tersebut di atas kode </head> atau bisa juga menggunakan cara berikut ini untuk menghindari render blocking css yang disebabkan oleh script pemanggil css style font awesome : Cara Optimasi CSS Font Awesome di Blog

Oke lanjut ke pokok pembahasan, selanjutnya, letakkan kode CSS3 berikut ini di atas kode ]]></b:skin> atau </style>

/* CSS3 Message Notification Box  by WahyuPratama.com */
.why-info, .why-success, .why-warning, .why-error {
padding:10px;
margin:10px 0;
display: block;
font-style: normal;
}
.why-info:before, .why-success:before, .why-warning:before, .why-error:before {
font-family:FontAwesome;
display: block;
font-style:normal;
font-weight:400;
speak:none;
display:inline-block;
text-decoration:inherit;
width:1em;
margin-right:.2em;
text-align:center;
font-variant:normal;
text-transform:none;
line-height:1em;
margin-left:.2em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.why-info:before {
content:"f05a";
}
.why-success:before {
content:'f00c';
}
.why-warning:before {
content:'f071';
}
.why-error:before {
content:'f057';
}
.why-info {
color: #00529B;
background-color: #BDE5F8;
}
.why-success {
color: #4F8A10;
background-color: #DFF2BF;
}
.why-warning {
color: #9F6000;
background-color: #FEEFB3;
}
.why-error {
color: #D8000C;
background-color: #FFBABA;
}

Cara Penggunaan

Kotak Pemberitahuan Pesan yang saya bagikan ada 4 (empat) macam dan masing-masing memiliki class tersendiri, yaitu class why-info untuk pesan info, why-success untuk pesan sukses, why-warning untuk pesan peringatan, dan why-error untuk pesan error.

Jadi, jika saya ingin menampilkan keempat kotak tersebut, saya dapat menggunakan kode HTML berikut ini :

<div class="why-info">Teks Anda Di sini</div>
<div class="why-success">Teks Anda Di sini</div>
<div class="why-warning">Teks Anda Di sini</div>
<div class="why-error">Teks Anda Di sini</div>

Letakkan kode HTML tersebut di kolom mode HTML pada post/page editor.

Sekian, Semoga Bermanfaat.

Leave a Reply