Block Text Dengan CSS

Berikut ini adalah kode untuk membuat blok text untuk blog kamu, silahkan di kreasikan sendiri sesuai dengan selera.

by Achmad Muharya

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="info-kode">Hasilnya sudah lebih bagus bukan ?</div>
<div class="informasi">Yang ini bagaimana kamu suka ?</div>
<div class="peringatan">Bagaimana hasilnya dengan yang ini lebih bagus ?</div>

CSS

.peringatan, .informasi, .info-kode {
    font-family:Arial;
    display: block;
    font-style: normal;
    padding: 15px 18px 15px 48px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin-bottom:50px;
}
.peringatan {
    color: #555;
    background-color: #db6161;
}
.peringatan:before {
    content:"\f071";
    font-family:'fontAwesome';
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: rgba(0, 0, 0, .18);
    font-size: 24px;
    line-height: 1;
}
.informasi {
    color: white;
    background-color: #7CADDE;
}
.informasi:before {
    content:"\f129";
    font-family:'fontAwesome';
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: white;
    font-size: 24px;
    line-height: 1;
}
.info-kode {
    color: #555;
    background-color: #e0e5eb;
}
.info-kode:before {
    content:"\f121";
    font-family:'fontAwesome';
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: rgba(0, 0, 0, .18);
    font-size: 24px;
    line-height: 1;
}

JavaScript

//Silahkan di edit lagi sesuai selera kamu.
//Artikelnya bisa kamu lihat di http://madtrik.blogspot.com/2015/01/membuat-blok-tulisan-di-artikel-blogger.html