Membuat Blok Tulisan Di Artikel Blogger

Kadang-kadang ketika kita membuat artikel, kita akan menambahkan sesuatu seperti sebuah peringatan, informasi artikel, informasi tentang kode yang diberikan, atau hal-hal lainnya yang pengunjung minimal harus tahu.

Jadi dengan adanya ini artikel di blog menjadi semakin berwarna dan lebih menarik, dan jangan lupa juga dengan fungsi sebenarnya blok tulisan ini. Jadi sebelum saya memberikan kodenya, marilah lihat dulu contoh blok tulisan yang ada di blog Mad Trik:

Hasilnya sudah lebih bagus bukan ?

Yang ini bagaimana, kamu suka ?

Bagaimana hasilnya dengan yang ini lebih bagus ?

Seperti itulah nanti hasilnya, sebenarnya tidak sebatas blok diatas itu saja, kamu juga bisa menambahkan macam-macam blok tulisan lainnya yang berbeda. Membuatnya pun bisa terbilang sangat mudah bahkan untuk seorang pemula sekalipun.

Dan sekarang saatnya kita ulas tuntas bagaiaman caraya membuat blok tulisan untuk blogger:

1. Langkah Pertama

Untuk langkah yang pertama hanya tinggal menambahkan kode CSS dibawah, ditempat biasa kamu menaruh kode CSS sebelumnya:

.peringatan, .informasi, .info-kode {

display: block;
font-style: normal;
padding: 15px 18px 15px 48px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,.1);
}

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

Setelah menaruh kode CSS diatas, silahkan simpan template kamu. Untuk warna blok tulisannya kamu juga bisa menggunakan warna lainnya, kamu juga bisa menggunakan "Warna Flat" atau warna kesukaanmu.

2. Langkah Kedua

Dan untuk langkah yang terakhir, kamu hanya tinggal menambahkan beberapa kode HTML saat kamu ingin membuat sebuah artikel atau postingan. Dan ingat taruh kode HTML dibawah ini di mode 'HTML' dan bukan mode 'Compose' saat membuat artikel:

Untuk kode blok informasi kode silahkan gunakan HTML dibawah ini:

<div class="info-kode">
Hasilnya sudah lebih bagus bukan ?
</div>

Untuk kode blok informasi silahkan gunakan HTML dibawah ini:

<div class="informasi">
Yang ini bagaimana kamu suka ?
</div>

Untuk kode blok peringatan silahkan gunakan HTML dibawah ini:

<div class="peringatan">
Bagaimana hasilnya dengan yang ini lebih bagus ?
</div>

Jika sudah selesai membuat artikelnya, publikasi lalu lihat hasilnya. Bagaimana bagus bukan hasilnya ?. Sebenarnya kamu bisa memnggunakan blok tulisan ini untuk apa saja tergantung selera kamu, so be creative.