Blok Tulisan Cantik V.2

Mad Trik - Ini sebenarnya adalah Versi upgrade, penambahan, peningkatan dari blok tulisan sebelumnya. Karena saya rasa untuk text blok yang sebelumnya itu masih terdapat kekurangan seperti warnanya yang mungkin kurang eye-cacthing atau kurang nge-jreng, tautan yang terdapat di dalam text blok masih mengikuti warna tautan default atau warna tautan awal yang ada pada blog.

Contohnya seperti gambar ini.

Jadi pada text blok ini saya sedikit menambahkan dan edit ulang dari yang sebelumnya untuk menghilangkan kekurangan-kekurangan yang ada pada text blok sebelumnya.

Sebelumnya kamu harus memasang Font Awesome Icons dulu di blog kamu untuk dekorasi tautannya. Karena didalam tautan text blok saya memasang ikon eksternal agar tautan atau link yang ada didalamnya dapat terlihat dengan jelas.

Dan juga pemberian warna yang lebih jreng dibandingkan dengan text blok sebelumnya yang saya kira warnanya masih agak pucat-pucat gimana gitu, karena warnanya yang saya pakai disini adalah warna flat atau datar yang lagi nge-top akhir-akhir ini.

Kalaupun kamu tidak suka dengan warna pilihan saya, kamu juga bisa menggantikanya sendiri dengan warna favorit kamu.

/*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: 15px 0;
}

.peringatan a, .informasi a, .info-kode a, .berhasil a, .bahaya a {
font-weight:700;
position:relative;
padding-right:20px;
display:inline-block;
}

.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 code, .informasi code, .info-kode code, .berhasil code, .bahaya code {
font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height: 16px;
display: inline-block;
color: #B43D3D;
padding: 1px 3px;
background-color: #eee;
border-radius: 2px;
}

.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";
font-family: 'fontAwesome';
}

.bahaya:before {
content: "\f056";
font-family: 'fontAwesome';
}

HTML

Dan cara pemakaiannya pun cukup mudah, kamu hanya tinggal memasukkan kode HTML dibawah in ketika mmebuat sebuah artike atau postingan di blog kamu. Masukan di mode HTML:

Informasi

<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>

Peringatan

<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>

Info Kode

<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>

Bahaya

<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>

Berhasil

<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>

Hasilnya

Untuk kamu yang kreatif mungkin bisa membuat blok text yang lebih baik dari buatan saya ini. Sekian tutorial kita kali ini. Jika ada kesulitan ketika menerapkan tutorial ini, harap beri komentarmu dibawah.