Cara Membuat Blok Catatan, Tips, Dan Peringatan di Blog

Cara Membuat Blok Catatan, Tips, Dan Peringatan di Blog ini sumbernya dari blog.kangismet.net. Tujuanya adalah agar agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

Sebelum ke CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan dan demonya di bawah ini :

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.

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/AVvXsEgfWDCcg3kiHAhUK5kmdBT_JvW9tFAjR-ZpFjHu9pzOhyphenhyphenRmX-QCmzUkGB0uuSptbHgit2cnufs1NRdih92VEKZBhH0KOhOxYF97ENEQTU17Kfk704YLxoXbLtoe8c1fy_DMmLSHJ_owYW4/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://lh4.googleusercontent.com/-qAl6Q2xCjaM/Uo0wAqTD5GI/AAAAAAAACiA/-yhOUXv4UlQ/w200-h378-no/Wikipe-kick.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilD_afIgGr63kzLTyIRtA34CUx8O6sEUO0J3SeumA4cB352UuzA_gASkrN-OjbKkVrymsw2uw2mRzgB6B6yqP2yX69NVZlLa8h8ktvN-Qqa1qRQZH8thLEZwmEvJxrbmClyJ80GaTyR5A/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Untuk memasukan ke dalam postingan, Anda tinggal memilih blok mana yang akan digunakan. Tulis kode dalam mode HTML.

Untuk Info (catatan), gunakan kode 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>

Anda juga dapat menggunakan 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>

Image :Drawn by Kasuga | Wikipe-tan
Sumber :http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html