Cara Mempercantik Postingan Blog dengan CSS

shares

Alt Text!
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.
Cara Mempercantik Postingan Blog dengan CSS
Cara yang saya terapkan ini murni hanya dengan CSS dan html biasa, alias tidak menggunakan javascript atau jquery tertentu
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.
Apa Itu CSS

CSS adalah sebuah singkatan dari Cascading Style Sheet. CSS ini digunakan untuk mengatur/memisahkan tulisan atau konten dengan tampilan visualnya dalam sebuah halaman situs, dalam bahasa markup seperti HTML. Tanpa CSS, website/blog akan terlihat polos hanya terlihat tulisan hitam dan latarbelakang putih polos. Jadi, jika website atau blog anda ingin tampil menarik, maka anda wajib menggunakan CSS
Begitu juga dengan tampilan postingan Blog. Jika ingin tampak agak menarik atau punya gaya, maka anda dapat menerapkan CSS didalamnya.
Bagaimana Caranya

Caranya anda dapat mengikuti Langkah-langkah berikut ini, namun sebelumnya untuk jaga-jaga, silahkan backup dulu template/tema blog anda.

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://3.bp.blogspot.com/-e93jyUY9MWA/WFcEUPUPLqI/AAAAAAAABBY/bbiJMQpgDEY99O-rZWQbxpMv9_WP8ADMgCLcB/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.

Related Posts

Buka Komentar Blog

0 komentar:

Post a Comment

Silahkan Berkomentar dengan memperhatikan beberapa point dibawah ini.

► Berkomentarlah sesuai topik
► Jangan sungkan untuk bertanya
► Saya sangat menghargai komentar anda.
► Di mohon untuk tidak menautkan link aktif , Karena link anda bisa jadi dianggap sebagai spam