Cara Mempercantik Postingan Blog dengan CSS

Allow, selamat malam di blog AUTOGOBLOOG , di kesempatan akan menjelaskan mengenai Cara Mempercantik Postingan Blog dengan CSS simak selengkapnya

Kalau Anda perhatikan hampir ala setiap blog saya ini, acap saya tampilkan beberapa variasi pengejawantahan postingannya (seperti tampak ala gambar di atas). Hal ini saya lakukan agar para pembaca kelas matematika tidak cepat bosan dan jemu karena memang kaidah penyampaian atau tulisan saya masih belum memenuhi standar seperti cerpenis yang profesional. Dengan pengejawantahan 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 asli hanya dengan CSS dan html biasa, nama samaran tidak menggunakan javascript atau jquery tertentu

Karena ini asli 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 dengan kelasmat.com ini menjelaskan sedikit tentang CSS.

CSS adalah sebuah singkatan dari Cascading Style Sheet. CSS ini digunakan buat mengatur/memisahkan tulisan atau konten dengan pengejawantahan visualnya dalam sebuah halaman situs, dalam bahasa markup seperti HTML. Tanpa CSS, website/blog bakal 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 pengejawantahan postingan Blog. Jika ingin tampak duga menarik atau punya gaya, maka anda dapat menerapkan CSS didalamnya.

Caranya anda dapat ikut-ikutan Langkah-langkah bersama-sama ini, namun sebelumnya buat jaga-jaga, silahkan backup dulu template/tema blog anda.

1. Membuat Kotak yang Pertama atau yang berwarna Orange

Pertama, Anda Copy CSS bersama-sama ini, kemudian pastekan asas tersebut di arah </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 bercokol panggil css tersebut dengan menambahkan asas bersama-sama ini ala postingan yang bakal anda Percantik.

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

2. Membuat Kotak yang Dialog atau persegi tanya jawab

Pertama, Anda Copy CSS bersama-sama ini, kemudian pastekan asas tersebut di arah </style>

 .dialog 
    padding: 3% !important;
    border: 2px dashed #e0e0e0;
    background-color: #a5b99f;
    text-align: left;

.tanya-wrapper 
    padding-left: 60px;

.tanya-wrapper, .jawab-wrapper 
    position: relative;

.jawab-wrapper 
    padding-right: 60px;

.tanya-wrapper, .jawab-wrapper 
    position: relative;

Kedua, Anda bercokol panggil css tersebut dengan menambahkan asas bersama-sama ini ala postingan yang bakal 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 harus dilakukan buat mempercantik postingan blog dengan CSS seperti yang saya terapkan ala blog ini, jika masih ada yang kurang jelas bisa ditanyakan dengan kolom komentar dibawah yang sudah tersedia.

Begitulah pembahasan mengenai Cara Mempercantik Postingan Blog dengan CSS semoga artikel ini menambah wawasan terima kasih

Tulisan ini diposting pada label

Bagikan Artikel ini