Sebenarnya bagi sobat yang sudah mahir CSS dan HTML tidak akan aneh dengan tutorial seperti ini bahkan orang yang sudah mahir CSS dan HTML mungkin bisa membuat lebih keren dari pada yang saya bagikan ini.
Sebelum saya memberi sobat kode CSS dan HTML liat dulu contohnya mungkin tertarik.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Untuk memasangnya, silahkan sobat simpan kode ini di atas ]]></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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumsq4XQzqSyVpoC8jQCU0Zsxlcs8VtIOzKfh-FLEkY0wJFPyPrMrfKoknxk14iiCFg5if9MuD8dl8swvXD6_EQkvjpqyfYJgubs0ZYzNAJ_EoZTV5wi2A5aR5Udgpn3D2Wy3RS_zWaY8/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZrXunwAbOogUkLghc1SJ4V3giNh97PYrFTv2yNBRY7IBUl3KWSh7C9iqng72qA8Yyk3ztCsuhspXSOKFS6ykB2-A4zFta-LQNVXsVEz-ir8d_fh_yhxghzV2ZoUKjn2WRgGnFCa4zXM/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8BO1mVZRUmGgnT4QGZAzj1G3J0NfYMlNZ55qqQ2WnHS666UGWpBme03rI8GfiCt77N2fEijV3K5ee5hUodZSn53ukXDOjombE4JLAT0tXrJ3EJstN_Ex3cuEkW9dC8Fql2kfeF6LnLnw/s1600/warning.png') 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:
<div class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
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 peringatan atau warning :
<div class='warning'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
Sobat juga bisa gunakan tag p dalam penulisan kode HTML, contoh :
<p class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</p>
