Blok Text V.2

Ini adalah blok text versi kedua. Banyak tambahan baru yang ada pada text blok yang kedua ini. Silahkan dilihat kodenya.

by Achmad Muharya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="informasi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan <a href="http://madtrik.blogspot.com/" rel="nofollow" target="_blank">Example Link</a> tortor congue.</div>
<div class="peringatan">Lorem ipsum dolor sit amet, consectetur <a href="http://madtrik.blogspot.com/" rel="nofollow" target="_blank">Example Link</a> adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>
<div class="info-kode">Lorem ipsum <a href="http://madtrik.blogspot.com/" rel="nofollow" target="_blank">Example Link</a> dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>
<div class="bahaya">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor <a href="http://madtrik.blogspot.com/" rel="nofollow" target="_blank">Example Link</a> accumsan at accumsan tortor congue.</div>
<div class="berhasil">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis <a href="http://madtrik.blogspot.com/" rel="nofollow" target="_blank">Example Link</a> orc no tortor accumsan at accumsan tortor congue.</div>

CSS

/*Warning Blok Text*/
 .peringatan, .informasi, .info-kode, .berhasil, .bahaya {
    display: block;
    font-style: normal;
    padding: 15px 18px 15px 48px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: 5px;
    font-family: Arial;
}
.peringatan a, .informasi a, .info-kode a, .berhasil a, .bahaya a {
    font-weight:700;
    position:relative;
    padding-right:20px;
    display:inline-block;
    text-decoration: none;
}
.peringatan a:before, .informasi a:before, .info-kode a:before, .berhasil a:before, .bahaya a:before {
    content:'\f08e';
    font-family:FontAwesome;
    font-style:normal;
    font-weight:normal;
    text-decoration:inherit;
    color:#333;
    position:absolute;
    bottom:0;
    right:0;
    font-size:14px;
}
.peringatan:before, .informasi:before, .info-kode:before, .berhasil:before, .bahaya:before {
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    font-size: 24px;
    line-height: 1;
}
.peringatan {
    background-color: #FF9800;
    color: #FFF3E0;
}
.informasi {
    background-color: #2196F3;
    color: #E3F2FD;
}
.info-kode {
    background-color: #607D8B;
    color: #ECEFF1;
}
.berhasil {
    background-color: #4CAF50;
    color: #E8F5E9;
}
.bahaya {
    background-color: #f44336;
    color: #ffebee;
}
.peringatan a {
    color: #E65100;
}
.informasi a {
    color: #0D47A1;
}
.info-kode a {
    color: #263238;
}
.berhasil a {
    color: #1B5E20;
}
.bahaya a {
    color: #b71c1c;
}
.peringatan a:hover {
    color: #F57C00;
}
.informasi a:hover {
    color: #1976D2;
}
.info-kode a:hover {
    color: #455A64;
}
.berhasil a:hover {
    color: #388E3C;
}
.bahaya a:hover {
    color: #d32f2f;
}
.peringatan:before {
    content:"\f071";
    font-family:'fontAwesome';
}
.informasi:before {
    content:"\f05a";
    font-family:'fontAwesome';
}
.info-kode:before {
    content:"\f121";
    font-family:'fontAwesome';
}
.berhasil:before {
    content:"\f058";
   ...

JavaScript

//Silahkan mampir ke madtrik.blogspot.com untuk tutorial pemasangannya ke blog.