Cara Merapikan Bullet List / Number List Pada Artikel Blog
Oct 27, 2020
Edit
Apakah number list atau bullet list pada saat anda membuat artikel di blog tidak rapi? nah disini, saya akan memberikan solusi bagaimana cara untuk merapikan bullet list / numbered list pada artikel sobat.
berikut ini adalah contoh List style otomatis (buller list dan number list) yang tidak rapi :
Contoh Bullet list tidak rapi :
Contoh Number List tidak rapi :
Dapat kita lihat diatas bullet list dan number list pada gambar tersebut tidak rapi sama sekali, dan tidak enak dipandang, tulisannya tidak menjorong kedalam / tidak lurus mengikuti paragraf sehingga tampak tidak rapi, lalu bagaimana cara merapikannya? berikut ini di simak cara untuk merapikannya dengan mengedit css pada template blog.
Cara Memperbaiki List-Style Blog Yang Tidak Rapi :
1. langkah pertama silahkan sobat masuk dulu ke akun blogger sobat, lalu masuk ke menu Tema, selanjutnya pilih edit HTML
2. setelah itu silahkan sobat cari kode seperti ini ]]></b:skin> , dengan menggunakan CTR + F.
3. setelah ketemu, slahkan copy paste kode di bawah ini, tepat di atas ]]></b:skin>.
.post-body ul li {list-style: disc;margin: 0 0 4px 15px;line-height:1.6em;}
.post-body ol li {list-style: decimal;margin: 0 0 4px 15px;line-height:1.6em;}
4. Sobat bisa mengatur jarak antar list kalimat, dengan mengubah kode yang berwarna biru tersebut, jika ingin jarak yang lebih besar, silahkan tambahkan saja menjadi 1.8em sesuai selera. jika ingin jarak yang lebih kecil, tinggal sobat kurangi saja contohnya menajdi 1.4em
5. Setelah itu silahkan sobat simpan template, dan lihat hasilnya, jika berhasil maka tampilan akan seperti di bawah ini.
Bullet List Yang Sudah Rapi :
Number List Yang Sudah Rapi :
Bagaimana jika gagal ?, silahkan ikuti step berikut ini :
1. Carilah kode yang mirip seperti gambar di bawah ini pada template sobat dengan menggunakan CTR + F, cari kode list-style seperti gambar di bawah
2. Setelah itu hapus kode tersebut dan ganti dengan kode di bawah ini
.post-body ul li {list-style: disc;margin: 0 0 4px 15px;line-height:1.6em;}
.post-body ol li {list-style: decimal;margin: 0 0 4px 15px;line-height:1.6em;}
3. Setelah itu simpah template. dan lihat hasilnya