Mengatasi Jarak Antar Paragraf yang Tidak Rapi pada Template OnePress


Saat ngeblog menggunakan Wordpress, baik yang gratis (wordpress.com) maupun versi berbayar (wordpress.org) tidak perlu repot mengatur tata letak termasuk posisi paragraf sebuah teks. Semuanya sudah diatur sedemikian rupa dengan rapi dan enak dilihat.

Namun saat ini, blog saya dari 7 domain yang ada semuanya menggunakan platform blogger (blogspot.com) dari Google dimana perbedaan mencolok dengan Wordpress versi gratis, tampilan blogspot masih kalah jauh meskipun bisa dikostumasi.

Terlebih untuk saya dan sebagian blogger lain yang tidak terlalu memahami HTML dan CSS bahkan tidak memiliki basic sama sekali untuk memahami informasi yang ada di internet. Seperti permasalahan berikut ini padahal pada saat mengetik terlihat sudah sesuai, dimana jarak antar paragraf dengan heading tidak rapi dan terlihat berantakan. Bagaimana menyelesaikannya?

Mode Compose

hasil tampilan bawaan template

Jika dilihat hasil jarak antar paragraf bawaan template OnePress perlu diperbaiki. Jarak antar paragraf, jarak paragraf dengan heading 2 dan heading 3 dan sebagainya.

Mengatasi Jarak Antar Paragraf yang Tidak Rapi di Template OnePress

Cara mengatasinya adalah memodifikasi kode CSS di menu Tema->Customize->Edit HTML. Langkah-langkahnya adalah sebagai berikut:

Langkah-langkah ini kemungkinan akan sama untuk template yang dikeluarkan oleh copybloggerthemes.com. Template dari source lain bisa menyesuaikan.

Cari kode di bawah ini:

.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-size:18px;color:$(post.title.color);font-weight:600;margin:0 0 20px}

Kemudian ubah pada bagian margin seperti berikut ini:

.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-size:18px;color:$(post.title.color);font-weight:600;margin:20px 0}

Save template.

Sepertinya sudah berubah, pada bagian header jaraknya sudah cukup rapi, namun lihat jarak antar paragraf masih dempet-dempetan.

jarak antar paragraf masih mepet

Untuk mengatasinya tambahkan kode di bawah ini di template:

.post-body div{margin:0 0 20px}

lihat yang diblok

Beberapa tema atau kebanyakan tema tidak menggunakan tag div tetapi p. Silakan disesuaikan. Kemudian save template. Hasilnya, sudah rapi kan? Enak dilihat dan dibaca oleh manusia.

nah, ciamik. enak dibacanya juga

Demikian cara mengatasi jarak antar paragraf yang tidak rapi di template onepress dan template-template lainnya di blogspot. Semoga bermanfaat.


Source img: pixabay.com

Post a Comment

أحدث أقدم