Pages

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..

8 comments:

  1. Eh... bersambung ya... mantabs ikutan ber kreasi nih...:)

    ReplyDelete
  2. Wah... contoh hasilnya kayak gimana nih mas??

    ReplyDelete
  3. @Digital Baca
    Huehehehe.. nanggung klo cuman yang kemaren :D, btw, sorry bro lom bisa kunjung balik. Baru sibuk mempersiapkan posting sehari dua :D Susah juga ternyata

    @vanudin
    [nyambung].. pokoke :D
    Syukur deh klo berguna.. Tak kirain pada dah teu :D

    @HanggaNuarta
    Lhah itu yang paling bawah sendiri.. :D
    Hayoo gak dibaca semua ya kekeke

    ReplyDelete
  4. iya nih ngasih contoh hasilnya dunk biar bisa nebak apa dah bener masangnya...,
    thanks visited

    ReplyDelete
  5. @atas
    Kalau diperhatikan, yang didemokan di atas sebenarnya adalah merupakan sekaligus contohnya lhoo :)

    ReplyDelete
  6. Hmmm..ya ya ya...ntar tak coba

    ReplyDelete
  7. Wew..yg Sederhana dlu deh Thom..nanti baru ke tingkat slanjutnya..tapi Oke juga nie...Doain Q gak bingung...

    Mumet urusan karo CSS

    ReplyDelete

Sangat dianjurkan berkomentar, tapi jangan nyepamm . OK?!