Membuat Blok Note, Alert dan Instruction di postingan Blog

Blok Note, Alert dan Instruction

Membuat Blok Note, Alert dan Instruction di postingan Blog Munkin tutoral seperti ini sudah banyak kita temui di blog-blog lain,yah apa boleh buat saya disini cuma mau share tutoral cupu(bagi yang udah master) sulit kalo orang nya seperti saya hahaha ^_^

Demo

Bagi yang belum tau cara nya:

taruh css berikut ini diatas ]]></b:skin>

.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";
}

Penggunaan HTML.

<div class="note">...</div>
<div class="alert">...</div><
<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'/>