Cara Mempercantik Postingan Blog dengan CSS

Kalau Anda perhatikan hampir pada setiap blog saya ini, selalu saya tampilkan beberapa variasi tampilan postingannya (seperti tampak pada gambar di atas). Hal ini saya lakukan agar para pembaca kelas matematika tidak cepat bosan dan jenuh karena memang cara penyampaian atau tulisan saya masih belum memenuhi standar seperti penulis yang profesional. Dengan tampilan yang tidak monoton, saya harap para pembaca blog saya ini dapat lebih berlama-lamaan.
Karena ini murni hanya menggunakan CSS, maka sebenarnya cukup mudah menerapkannya. Namun, mungkin bagi sebagian orang yang masih awam, arti CSS saja ada yang belum tau. Nah Bagi yang belum tau, ijinkan saya melalui kelasmat.com ini menjelaskan sedikit tentang CSS.
Begitu juga dengan tampilan postingan Blog. Jika ingin tampak agak menarik atau punya gaya, maka anda dapat menerapkan CSS didalamnya.

Langkah-langkah Cara Mempercantik Postingan Blog dengan CSS

1. Membuat Kotak yang Pertama atau yang berwarna Orange
Pertama, Anda Copy CSS berikut ini, kemudian pastekan kode tersebut di atas </style>

 .definition-title {
    padding: 20px;
    background: #E19729;
    color: #fff;
    font-weight: bold;
}
.definition-content {
    padding: 20px;
    background: rgb(245, 207, 165) none repeat scroll 0% 0%;
    color: rgb(112, 68, 10);
}

Kedua, Anda tinggal panggil css tersebut dengan menambahkan kode berikut ini pada postingan yang akan anda Percantik.

<div class="definition-title">
Ini judul konten</div>
<div class="definition-content">
ini isi kontennya</div>

2. Membuat Kotak Dialog atau kotak tanya jawab
Pertama, Anda Copy CSS berikut ini, kemudian pastekan kode tersebut di atas </style>

.dialog{padding:3%!important;border:2px dashed #e0e0e0;background-color:#a5b99f;text-align:left}
.tanya-wrapper,.jawab-wrapper{position:relative}
.tanya-wrapper{padding-left:60px}
.jawab-wrapper{padding-right:60px}
.tanya-bg,.jawab-bg{width:50px;height:40px;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioXioOXqpWC69v5lGDnUxVnDzrQE3yFmDSDfbB2FYWf8_a1i13X7lgHvdsm4qSaKzd1Xf-xfIQqqWKC28B3ouem2AWojESz6tenUd7OGcwuPIVvahJy-O8QkYcuypyEUyxvadxFq7xzBo/s1600/dialogbg.png");background-repeat:no-repeat;background-size:auto 100%;position:absolute;top:0}
.tanya-bg{background-position:left top;left:0}.jawab-bg{background-position:right top;right:0}
.tanya-content{padding:10px;background:#53e057;color:#555;border:1px solid #0d8531;border-radius:5px}
.jawab-content{padding:10px;background:#f9f9f9;color:#555;border:1px solid #e0e0e0;border-radius:5px}
.jawab-content b{color:#333}

Kedua, Anda tinggal panggil css tersebut dengan menambahkan kode berikut ini pada postingan yang akan anda Percantik.

<div class="dialog">
<div class="tanya-wrapper">
<div class="tanya-bg">
</div>
<div class="tanya-content">
ini pertanyaan</div>
</div>

<div class="jawab-wrapper">
<div class="jawab-bg">
</div>
<div class="jawab-content">
isi jawaban</div>
</div>
</div>

Keterangan : yang saya beri tanda gray itu silahkan sesuaikan dengan kebutuhan anda.
Mungkin hanya itu saja yang perlu dilakukan untuk mempercantik postingan blog dengan CSS seperti yang saya terapkan pada blog ini, jika masih ada yang kurang jelas bisa ditanyakan melalui kolom komentar dibawah yang sudah tersedia.