Message Box (kotak pesan) Keren di Blog

proBlogiz

Cara Membuat Message Box (kotak pesan) Keren di Blog

Membuat Box Message (kotak pesan) sangat berguna untuk menampilkan status pesan kepada pengguna/pembaca di situs Anda. Bagi pengembang Aplikasi Web, menggunakan kotak pesan (box message) adalah cara terbaik untuk menampilkan dan menginformasikan pesan sehingga pembaca menerima pesan yang sejelas mungkin tentang apa yang sedang terjadi.

Box Message / message box / alert message box dapat berupa pesan kesalahan (error box message), pesan peringatan (warning box message), pesan informasi ( information box message), pesan sukses/gagal (successful operation box message), pesan pengumuman dst. Penggunaan warna yang berbeda pada box (kotak pesan) juga dapat memperjelas tentang maksud dari status pesan itu sendiri, misalkan: warna merah pada pesan error, situs facebook biasa menggunakan kotak pesan yang mirip dengan type pesan sukses.

Dalam tutorial Desain Blog ini, saya memberikan beberapa contoh Message Box Keren yang dibuat menggunakan CSS dan menambahkan icon cantik didalamnya. Penambahan icon dan warna yang berbeda untuk tiap Status Pesan tentu akan mempertegas isi pesan tesebut.

Berikut contoh Box Message Keren untuk status pesan yang berbeda :

Can I haz messages?

Yes of course you can!

This is an info message.

Note: Eve doesn´t claim to be perfect (me to)!

It is prohibited to turn this design into a fixed layout!

Information Box Message ( kotak pesan informasi)

Info text message here

CSS code :

.info {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px; 
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 5px;
}
.info {
    color: #00529B;
    background: #BDE5F8 url('https://sites.google.com/site/problogiz/my-icon/info.png') no-repeat 10px center;
}

HTML :

<div class="info">Info text message here</div>

Success Box Message (kotak pesan sukses)

Successful operation text message here

CSS code:


.success {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px; 
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 5px;
}
.success {
    color: #4F8A10;
    background: #DFF2BF url('https://sites.google.com/site/problogiz/my-icon/ok.png') no-repeat 10px center;
}

HTML :

<div class="success">Successful operation text message here</div>

Warning Box Message (kotak pesan peringatan)

Warning text message here

CSS code :


.warning {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px; 
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 5px;
}
.warning {
    color: #9F6000;
    background: #FEEFB3 url('https://sites.google.com/site/problogiz/my-icon/warning.png') no-repeat 10px center;
}

HTML :

<div class="warning">Warning text message here </div>

Error Box Message (kotak pesan kesalahan)

Error text message here

CSS code :


.error {
    border: 1px solid;
    margin: 15px 0px;
    padding:15px 20px 15px 55px;
    width: 500px; 
    font: bold 12px verdana;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-shadow: 2px 2px 2px #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 5px;
}
.error {
    color: #D8000C;
    background: #FFBABA url('https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png') no-repeat 10px center;
}

HTML :

<div class="error">Error text message here</div>

Keterangan :

*Ganti width: 500px; sesuaikan dengan lebar halaman blog Anda.
*Ganti "text message" dengan kata pesan yang akan Anda pasang.
*Gambar icon box message pada kode yang berwarna merah, Anda bisa menggantinya dengan icon/gambar sendiri. Atau bisa menggunakan contoh gambar icon yang lain, saya sediakan dibawah ini :