Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Cara Membuat Message Box (kotak pesan) Keren di Blog

Box Message Keren

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 :

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 :

                              check icon edit icon warning icon info1 icon error2 icon info2 icon tip icon warning2 icon error3 help icon warning4

Kalau tertarik dengan pilihan gambar icon yang lebih banyak, silahkan kunjungi di situs: www.findicons.com

So, bagaimana? tertarik memasang Kotak Pesan di blog Anda?
Box Message ini dapat Anda tempatkan di halaman blog, Hompage atau dipostingan, dimana saja Anda mau.

Wait for next cool CSS design !!!
Artikel Terkait Lainnya:
Click here for comments

21 komentar

Makasih sob atas informasinya. izin bookmark dulu ya tips ini dan nanti saya praktekkan dan terapkan pada blog saya.. (y)

REPLY

sama2 sob, silahkan:)
btw tahnks udah mampir

REPLY

Wahhh... thanks banget ya tutornya. langsung coba ahhhh... :) mudah2an berhasil..

REPLY

Sama-sama sob. balik lagi nih cuman mau konfirmasi aja kalau blog sobat ini sdh sukses tuh jadi follower ke 21. Kalau berkenan, follow back ya sob... (y)

REPLY

ok sama2
silahkan dicoba pasti bisa:)

REPLY

iya sob..thanks udah follow blog ini
saya udah follow back

REPLY

wah keren2 icon nya bro, mantep deh :D

REPLY

ehhe mantap...
saya sudah pakai sejak lama.. :D

REPLY

ijin copas di blog ane bro , dengan sedikit tambahan keterangan letak pemakaian css dan htmlnya, dah ane cantumin sumbernya jg

salam blogger

REPLY

Thanks ya kak^^ Hanya saja, maksudnya gimana ya? HTML nya ditaruh disebelah mana.. CSS Code juga. Saya biasa menerima info tutors dengan detil soalnya... Mohon dimengerti karena baru setengah tahun berselancar didunia blogger

REPLY
Komentar ini telah dihapus oleh administrator blog.

gan tutorialnya udah saya praktekan, tapi gagal, ane coba waktu bikin postingan mode (HTML), terus di pratinjau malah gk bisa, ada pemberitahuan "Required field must not be blank", solusinya gimana gan ?

REPLY

terimakasih sudah berbagi, ingin coba pasang saya punya web

REPLY

wah keren ni gan, jadi pengunjung web/blogg bisa tau mana pesan yang error
thanks gan

REPLY

ini pie carane gan, aku tak faham, maklum belajar blog baru 1 minggu, jelasin dong lankah"nya

REPLY

pasang css box message diatas ditemplate sebelum tag ]]></b:skin>:, kemudian gunakan kode HTML diatas untuk memanggilnya , seperti ini : <div class="error">Error text message here</div>

REPLY

terimakasih banyak sob, sangat membantu tutorialnya..

http://obattpenyakit.com/

REPLY

kere-keren box msg nya..ijin comot kode css nya gan..

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|