|
Menarik ya kan |
Membuat info tips dan peringatan menarik dengan css - jika saya menyuguhkan sebuah artikel terkadang menyisipkan entah itu sebuah informasi tambahan atau tips bahkan peringatan jelas pernah saya lakukan. Atau mungkin jika artikel sobat diperbaharui, biasanya ini sering terjadi pada artikel tips atau tutaorial.
Berikut akan saya coba bagikan bagaimana cara membuat tampilan baik itu info, tips atau peringatan agar lebih menarik tentunya dengan css.
Coba lihat penampakan gambar di atas, atau coba lihat di bawah ini :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Ini adalah contoh tampilan tips. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Ini adalah contoh tampilan warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Bagaimana menurut sobat ? Jika berminat silahkan terapkan pada blog sobat dan berikut cara beserta kodenya.
Untuk langkah awalnya, silahkan sobat simpan kode CSS ini di atas kode
]]></b:skin> atau </style>.info, .tips, .warning
{
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info
{
background: #e0e5eb url('http://goo.gl/vkSsyv') no-repeat 12px 8px;
color: #222
}
.tips
{
background: #7CADDE url('http://goo.gl/Py1WRQ') no-repeat 12px 8px;
color: #fff;
}
.warning
{
background: #db6161 url('http://goo.gl/Je3kPB') no-repeat 12px 8px;
color: #fff;
}
Selanjutnya, apabila ingin memasukan ke dalam postingan, sobat tinggal memilih blok mana yang akan digunakan. (Tulis kode dalam mode HTML). Untuk Info (catatan) sobat gunakan kode seperi ini:
Untuk tips, kodenya seperti ini :
<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>
Untuk info, kodenya seperti ini :
<div class="informasi">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>
Untuk peringatan atau warning, kodenya seperti ini :
<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>
Kalau sobat merasa bingung silahkan tanyakan melalui kotak komentar di bawah ini.
Semoga bermanfaat, terimaksih.
Artikel telah ini telah di perbarui pada 12 Agustus 2014