Membuat Blok Catatan, Tips, Alert, dan Note Di Blog

Membuat Blok Catatan, Tips, Alert, dan Note Di Blog - Kali ini saya akan berbagi cara Blok Catatan, Tips, Alert, dan Note di blog. Tutorial ini saya dapatkan dari blog ah-shared. Mungkin bukan tutorial yang asing jika dilihat oleh master CSS dan HTML. Membuat blog stylish, fresh, keren, dan simple adalah salah satu keinginan blogger. Gimana, bagus kan tampilannya, Tidak usah lama2, langsung ke tutorialnya. :)

Membuat Blok Catatan, Tips, Alert, dan Note Di Blog :
1. Buka blogger

2. Klik Template -> Edit HTML -> copy dan paste kode dibawah ini diatas kode ]]></b:skin>
CSS:

.SCHalert,SCHnotice,.SCHsuccess,.SCHinfo,.SCHseries{margin:5px 0;border:2px solid #ddd;padding:.8em .8em .8em 3.6em;text-align:left}.SCHalert{background:#fbe3e4 url(http://2.bp.blogspot.com/-m199bF-51Y8/UD-xoPclOMI/AAAAAAAAA2g/v0Ph5F33LTU/s1600/MBT+alert.png) no-repeat scroll .8em .4em;color:#8a1f11;font:bold 15px Trebuchet MS;border-color:#fbc2c4}.SCHnotice{background:#fff6bf url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png) no-repeat scroll .8em .4em;color:#514721;font:bold 15px Trebuchet MS;border-color:#ffd324}.SCHsuccess{background:#CCFEBF url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png) no-repeat scroll .8em .4em;color:#264409;font:bold 15px Trebuchet MS;border-color:#c6d880}.SCHinfo{background:#DFE7FE url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png) no-repeat scroll .8em .4em;color:#205791;font:bold 15px Trebuchet MS;border-color:#92cae4}.SCHseries{background:#9FCFFF url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png) no-repeat scroll .8em .4em;color:#444;font:bold 15px Trebuchet MS;border-color:#099CEE}.SCHnotice a{color:#514721}.SCHsuccess a{color:#264409}.SCHinfo a{color:#205791}.SCHseries a:link{color:#19109F}.SCHseries a:hover{color:#1950CF}.SCHerror a,.SCHalert a{color:#8a1f11}

3. Simpan Template

4. berikut ini HTML nya
HTML :

<div class='SCHalert'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='SCHnotice'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='SCHsuccess'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='SCHinfo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='SCHseries'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>

5. Bagaimana cara mengaktifkan pada postingan ?
Pada saat ingin membuat postingan, ada 2 bagian yaitu COMPOSE dan HTML, pilih HTML.
Contoh :
jika ingin memakai kode alert

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

jika ingin memakai kode notice

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

jika kurang paham silahkan berkomentar :)