July 18, 2019

Cara Merapikan Tampilan Bullet List di Postingan Blog Menggunakan CSS

July 18, 2019

Menggunakan Bullet List di postingan blog disarankan agar tulisan ramah pengguna (user friendly), yakni mudah dipindai (scannable) dan mudah dipahami.

Cara Merapikan Tampilan Bullet List di Postingan Blog Menggunakan CSS


Inti contoh bullet list:

Kadang Tampilan Bullet List di Postingan Blog tidak rapi, jika daftar(list) yang ditampilkan berupa kalimat panjang. Lihat contoh berikut ini:

Bullet List di Postingan Blog

Cara Merapikan Tampilan Bullet List 

Berikut ini cara merapikan bulleted list di postingan blog. Sangat mudah.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.post-body ul li {list-style: initial;margin: 0 0 4px 15px;line-height:1.4em;}

3. Save!

Hasilnya seperti gambar di bawah ini. Bandingkan dengan list sebelumnya, lebih rapi 'kan?

Bullet List di Postingan Blog


Demikian Cara Merapikan Tampilan Bullet List di Postingan Blog Menggunakan CSS. Untuk number list, silakan buka Cara Mempercantik Number List Postingan.

Good Luck and Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

8 comments on Cara Merapikan Tampilan Bullet List di Postingan Blog Menggunakan CSS

  1. This comment has been removed by the author.

    ReplyDelete
  2. Muter muter karena kata kunci kurang tepat, akhirnya nemu & nyampe juga sama postingan yang dibutuhin.

    Sukses selalu gan. . 👍😊

    ReplyDelete
    Replies
    1. Hehe.. benar, kadang kita tidak menemukan info yang dicari di Google karena kata kunci yang tidak pas

      Delete
  3. Emm, kalo untuk nomor gimana tuh, bulletnya udah rapi tapi numbernya belum 😊

    ReplyDelete
    Replies
    1. Number list di sini:
      https://www.contohblog.com/2015/10/mempercantik-tampilan-numbered-list.html

      Delete
  4. Terima kasih sangat membantu, works di blog saya.

    ReplyDelete
  5. Mengapa bullet list pada template saya tidak bisa diubah ya mas?

    ReplyDelete

Contact Form

Name

Email *

Message *