Membuat Kotak Pesan Keren di Blog

Postingan kali ini akan membahas tentang Membuat Kotak Pesan Keren di Blog. Membuat Message Box (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. Tampilannya antara lain sebagai berikut

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.

Berikut contoh Box Message Keren untuk status pesan yang berbeda beserta code CSS dan HTMLnya

Keterangan : untuk code CSS ditaruh di atas kode ]]></b:skin> pada halaman edit html di akun blogger anda sedangkan kode html adalah kode untuk memanggil, bisa ditaruh saat anda bikin gadget (html/java script) baru di halaman layout akun blogger anda atau bisa juga ditaruh didalam postingan, tentunya saat memposting dalam posisi tab HTML 

• Information Box Message ( kotak pesan informasi)

tampilannya sebagai berikut.

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 code : 

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

• Success Box Message (kotak pesan sukses)

tampilannya sebagai berikut.

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 code : 
<div class="success">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 code : 
  <div class="warning">text message here</div>
  
  
  
  

  • Error Box Message (kotak pesan kesalahan)

  tampilannya sebagai berikut.

  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 code : 

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

  Keterangan :
  
  

  *Ganti width: 500px; sesuaikan dengan lebar halaman blog Anda.
  *Ganti "text message here" dengan kata pesan yang akan Anda pasang.
  *Gambar icon box bisa anda ganti dengan mengganti url iconnya sesuai kesukaan anda

  
  Demikian tutorialnya semoga bermanfaat.
  
  sumber : http://problogiz.blogspot.com/2012/12/membuat-box-message-keren-di-blog.html
  
  
  
  WAJIB BACA!

  Sebuah Penghasilan Online paling realistis dan anti SCAM, bukan bisnis online tapi kerja online. Kerja Online cuma dengan mengetik kode captcha, anda digaji dollar. Silahkan baca postingan kerja online ketik captcha klik disini

Share artikel ini :

Labels: Blogging

Artikel Terkait