Membuat Blok Catatan, Tips Dan Peringatan Di Blog

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 :

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/AVvXsEg4gNG8_j_YqOUcX47eGqh4KrzILupH-1UTyspeKrFuLbqXm5CGKWIQQTDDWpy4VuDyH-_xONLfbua-0BiLraiW-FSbDYyTZant_a55Haxsv-MGOMIU6C_Wo53clR0dFBhuzOXdha6YNuI/s1600/info.png') no-repeat 12px 8px;
 color: #222;
 border-radius:2px;
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUo_aqkNU7v05xrIcOo15P-20o4s5nNyYC6hP09mYwgSk5XO04ZHcfpHCi_8HtYpgRMKYTGMiR0s4D8Bl11C_IvLPonJj1kixoKLIYiyybviVW59tCR5lg_McSlb88eKsI8gh5rivWGag/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjyIDSdkMNKX2j_PoDuW_M6glWTBdQUZlVWz5zRMSF7Y0Hm3bVjIM1_uT9qV8fNx87alUIAR7Q5xjM-VggdAAMK1SnUZkvecBxVpoSJpyH-6tNqpjjT9_Zx4A-O5ED4PUJbERmRceXb8/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}

Untuk info, 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 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 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>

Thanks To Kang Ismet