Membuat blok catatan, tips dan peringatan - 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 anda 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.
anda bisa memulai simpan kode ini diatas
]]></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/AVvXsEjcgYyPDYhZbyfjYrWVerf1d3bHEVfbkmg8T0dyzPbb48HLqK88ApQkTthfrgDLz15VP8r8QxYhvVBbusDqfwHMcQm9vXO1OEpRlwGHmT5He5LsTClaumy6-2qOhu6oi1S0Do3ioZRg1-s/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCtlO7nRlwOoUVgnVusH4TTBOK21e88AVwZ-G9ruQz3GJJDq-Bm8EBCMu7uBs3zsS8oK810jzVmypkob_LZ28s-yQy411gW-jmrfVBQQCKsm6lqO1chgnyelXNGk3wzenoL2RK_wC4GwE/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3lnnbU88fzuKPc90OfrxVjTLlA4Q5L1gMJCjZqeLonLyLxCCh5v5E8s8bOooeT6QPXISVNvnJiWP72qz8FIqc-8P6TDOsilGK2uJYjBLNAn1v9aoAnSkOpY73TOhYYjg11nI5-vmnr0/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>
anda 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>
Sumber :
http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html