Membuat Blok Note, Alert dan Instruction di Blog. Mungkin sudah ada tutorial semacam ini, tapi saya hanya ingin share saja. Disini akan dibahas bagaimana cara membuat blok note (catatan), alert (tanda, peringatan) dan instruction (instruksi). Selain ini masih ada lagi blok lainnya seperti blockquote (kutipan). Baik, mari langsung saja simak tata caranya.
Langkah 1: Simpan kode CSS ini di atas ]]></b:skin>
/*Blok*/
.note,.alert,.instruction {position:relative;display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:3px;border-bottom:2px solid rgba(0,0,0,.1)}
.note p,.alert p,.instruction p {margin:0px}
.note {background-color:#FCD683}
.alert {background-color:#db6161}
.alert a,.alert code {color:#FFC0A7}
.instruction {background-color:#58C99D}
.instruction a,.instruction code {color:#C4FCE5}
.note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.15);font-size:22px;line-height:1}
.note:before {content:"\f040"}
.alert:before {content:"\f071"}
.instruction:before {content:"\f05a"}
Langkah 2: Penggunaan HTML.
1. Note
<div class="note">...</div>
Di dalam CSS nya telah ditambahkan CSS untuk link a, paragraf p dan code. Anda boleh menggunakannya sesuka hati.
2. Alert
<div class="alert">...</div>
Masih banyak cara lain untuk modifikasi blok seperti ini. Tidak harus menggunakan font icon. Anda juga boleh menggunakan img gambar icon, tutorialnya ada di situs lain.
3. Instruction
<div class="instruction">...</div>
Dalam tutorial ini, saya tidak menggunakan img atau gambar icon, melainkan menggunakan font-family:'FontAwesome' yang berarti jika kalian yang belum punya font nya, maka untuk bisa menggunakan Font Awesome ini Anda harus simpan kode link dibawah ini diatas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Semoga bermanfaat.
