Cara Membuat Message Box Keren di Blog | Otak Nakal 21

Membuat Box Message /kotak pesan sangat berguna untuk menampilkan status pesan kepada pengguna/pembaca di situs Sobat. 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.
dan inilah beberapa contoh serta codingan Message Box keren
Anda dapat menyimpan Script CSS di atas ]]></b:skin>
dan untuk Kode HTML itulah yang akan kalian pasang di postingan HTML kalian
Contoh : <div class="warning">tulis dengan pesan kalian</div>

Info text message here

[code type="CSS"].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/otaknakal21/home/png/info.png') no-repeat 10px center; }[/code] [code type="HTML"]

Info text message here

[/code]

Successful operation text message here

[code type="CSS"].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; }[/code] [code type="HTML"]

Successful operation text message here

[/code]

Warning text message here

[code type="CSS"].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/otaknakal21/home/png/warning.png') no-repeat 10px center; }[/code] [code type="HTML"]

Warning text message here

[/code]

Error text message here

[code type="CSS"].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/otaknakal21/home/png/dialog_error_3.png') no-repeat 10px center; }[/code] [code type="HTML"]

Error text message here

[/code] [info title="Pemberitahuan :" icon="info-circle"]

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.

[/info]

Terimakasih, jika ada yang kurang di pahami atau ada kendala dengan script di atas sobat bisa bertanya di kotak komentar di bawah sesuai dengan isi postingan ini :D