Membuat Blok Catatan, Tips dan Peringatan di Blog

Sebenarnya sudah banyak yang mahir dalam bidang CSS dan HTML, tapi walaupun mahir tentang css dan html, terkadang juga butuh ide untuk memoles blognya supaya lebih menarik. Salah satunya menambahkn blok catatan, tips dan peringatan diblog dan sebagainya. Disini saya akan memberikan tutorial untuk memoles blognya supaya lebih menarik yaitu dengan membuat blok catatan, tips dan peringatan diblog, Contohnya seperti ini:

Masuk ke blogger, buka template -> edit html cari kode ]]></b:skin>

Kemudian letakan kode dibawah ini diatas kode ]]></b:skin>

.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/AVvXsEi_rOjcuJOLZEv-NimM92ivCkNt4QZmAIzsMycwWZxk0YOOtiv1PjRjGmX7O0uTD-otF30lDJV4duzoWc0JTOnZeJPffPxqfq_9nPPGwU9Y-_bNI9VBb4pHPgKuMEgVeoIwG8CWxoeaRAg/s1600/info.png) no-repeat 12px 8px;color:#222}
.tips{background:#7CADDE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpl2M2kN9RhGq6KflX61pryv-Tp5rljw6eS6gZWvYoaGZ7lbn04jpf3LclXBEwSmN5BApj_Vb4ekJkchHNu2j2Ott4I7Kf_pu1jAMDRMOnKYg1U-RlNJS8qz2HWcF_Q2KoSMJ4zmpySk/s1600/tips.png) no-repeat 12px 8px;color:#fff}
.warning{background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0iklulSP7pBqebJ-Gjrq5KUq99QTq_Y-3oKiglO058DgqDqiy7EneE1ARIlpg5tU_jpmGjaJH9gj6eTq2oURO4FnCLzVDm-ubGzWYzqyFqqQecciWDEdbfacJPiUJN3ejur8LqlXQNM/s1600/warning.png) no-repeat 12px 8px;color:#fff}

Selanjutnya, apabila sobat ingin memasukan kedalam postingan, sobat tinggal memilih blog mana yang akan digunakan. (Tulis kode dalam mode HTML)
Untuk menggunakan blok catatan kodenya seperti ini:

<div class='info'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>

Untuk menggunakan kode tips:

<div class='tips'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>

Untuk menggunakan kode warning/peringatan:

<div class='warning'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>

bisa juga menuliskan pada tag <p>, sobat bisa menuliskannya seperti ini pada penulisan html:

<p class='info'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </p>

Kode dari: blog.kangismet.net