Membuat Kotak Alert di Postingan v2

Jika sebelumnya kita sudah sama-sama membuat kotak alert/warning/peringatan, pada kesempatan kali ini kita akan membuat kotak peringatan lagi dengan style yang berbeda. Kalau postingan yang kemarin hanya bermain pada warna. Nah di sini akan kita oprek kode yang kemarin kita dapatkan. Sehingga ada variasi lagi.. Masa' sama semua setiap blogger :D Harus kreatif dun, ya kan?

Nah.. kemarin kita sudah dapat kode ini :

.alert {
background:#ffcdc5;
border:1px solid #cd2d12;
font-size:.9em;
padding:5px 5px 5px 35px;
margin:.5em 0 .5em 0;
min-height:35px;
color:#8c1400;
}

Berawal dari kode itu, bisa kita oprek lagi, kita tingkatkan lagi dengan ditambah gambar atau yang lain. Sesuai kreatifitas masing masing.

• Misal supaya batas kotaknya berubah, kita cukup oprek pada marginnya.
  margin:.5em 0 .5em 0;
  Silahkan edit sendiri nilai margin sesuai dengan yang dikehendaki. Akhiran em di akhir angka bisa diganti px [pixel]. Disarankan jika bingung dengan jenis-jenis akhirannya [ada banyak akhiran masalahnya], pakai saja px.
  

  Format aturan nilai margin :
  margin : atas kanan bawah kiri; [Searah jarum jam]
  

  
  
• Hilangkan min-height:35px; jika tidak suka dengan space yang terlalu besar antara baris paling bawah dengan border bawah.
  

  Pengecualian :
  Jika ada melakukan langkah insert gambar seperti point selanjutnya, 'embel-embel' ini harus mutlak disertakan dan nilainya menyesuaikan dengan tinggi [height] gambar (dalam pixel)

  
  
• Tambahkan url(http://alamatgambar) no-repeat; pada background, sehingga menjadi seperti ini :
  background : #ffcdc5 url(http://alamatgambar) no-repeat;
  Untuk menambahkan gambar di samping kiri kotak warning.
  Contohnya seperti ini nih..
  

  Warningnya ada gambarnya euy... beda sama yang di atas.
  

  
  
• Yang lain, silahkan deh sesuai kreatifitas masing masing :) Tak kasih kebebasan :D

Selamat berkreasi..