Membuat Blok Catatan, Tips dan Peringatan di Blog

Membuat Blok Catatan, Tips dan Warning - Sambil menunggu rasa kantuk datang, kali ini saya akan berbagi cara membuat catatan, informasi, tips, atau peringatan di blog, agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. Tapi walaupun mahir dalam CSS dan HTML terkadang buntu ide untuk memoles blognya supaya lebih menarik.

Sebelum saya kasih CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan pada demo di bawah ini :


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 50px;
 margin: 5px 0;
 border-radius:6px;
 font-size:.9rem
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnmQ3iF4D9RdvpHOwULfFeW6T4q4rZV53_f3NqqH9al9OsFt4phRpzlre0hO3se5aWuWoF992UqaEeKzGYDm7z8hNiwkogp_ST4zcdy4TTV9X8p4_moz5KdvdD9ocaYYm-yLJQVt8pq4/s30-rw/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2jCoHI6mJBJ1eTjZ0ns4ejP5CgTS9YhvyEBzphNGlXUbqt8nr4IAoYI4evokYr2BTZmLBD54c_t4jjEat1hKvTzT8wgEB0gw5Oxbm0LAbnr4g36QoRtmhNW-rsFGPq0Qom7lIsQjNI4/s30-rw/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpOzFlOxYBYgnvg96dZtqHhKHbDJOyh7YVzPytQR_Ratuzm2CoLSJOTnwQyCWHpc8PzqC-cKscE71sl-NmP9qDH8T1oJmrOZefY0RBKlfJHPXK6cbMjyWJ5varkkEPEz3k77v94h-LIk/s25-rw/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'>
..kata-kata disini..
</div>

untuk tips, kodenya seperti ini :

<div class='tips'>
..kata-kata disini..
</div>

untuk peringatan atau warning :

<div class='warning'>
..kata-kata disini..
</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>

Artikel ini dibuat pada :5 Oktober 2013 diupdate pada : 15 Maret 2024