Cara Optimalkan Tampilan List Widget di WordPress

04/09/2025 Yunandra 293 Lihat

Daftar Isi

yunandracom. Tampilan list widget di WordPress bisa dioptimalkan dengan jarak item, panah, dan gambar rapi, tanpa mengubah tampilan grid yang sudah ada.

Buku Madrasah Minimalis Strategi Pengembangan Sekolah Unggul Berbasis Islam — **Buku Terbaru**

Optimalkan Tampilan List Widget Last Post di WordPress

Widget “Last Post” di WordPress sering digunakan untuk menampilkan daftar artikel terbaru. Dengan tampilan list widget yang rapi, pengunjung lebih mudah membaca dan menavigasi konten. Berikut langkah-langkah yang bisa diterapkan agar daftar artikel terlihat profesional.

Atur Jarak Antar Item List

Langkah pertama adalah menghilangkan style default dan mengatur jarak antar item list agar lebih rapi.

Gunakan List-Style : none untuk menghapus bullet default.
Set padding dan margin menjadi 0 agar lebih fleksibel.
Tambahkan margin-bottom dan padding-bottom untuk memberi jarak antar artikel.
Gunakan garis pemisah (border-bottom) (border-bottom) agar setiap item lebih jelas terlihat.

ul.wp-block-latest-posts__list:not(.is-grid) {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.wp-block-latest-posts__list:not(.is-grid) li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  display: flex !important;
  align-items: flex-start;
}

Tambahkan Tanda Panah di Setiap Item

Agar lebih menarik, Anda bisa menambahkan tanda panah di setiap item yang tidak memiliki gambar. Panah ini membuat daftar lebih mudah dibaca dan terlihat profesional.

ul.wp-block-latest-posts__list:not(.is-grid) li:not(.has-post-thumbnail)::before {
  content: "➤";
  position: absolute;
  left: 0;
  top: 0;
  color: green;
  font-size: 16px;
  line-height: 1.5;
}

Jika item memiliki gambar, panah otomatis hilang agar tampilan tidak berantakan.

ul.wp-block-latest-posts__list li.has-post-thumbnail::before {
  content: none !important;
}

Atur Jarak dan Ukuran Gambar

Untuk item yang memiliki gambar:

Gunakan gap untuk memberi jarak antara gambar dan teks.
Pastikan gambar tidak melebihi 120px agar proporsional.
Gunakan border-radius agar tampilan lebih modern.

ul.wp-block-latest-posts__list li.has-post-thumbnail {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

ul.wp-block-latest-posts__list li.has-post-thumbnail .wp-block-latest-posts__featured-image img {
  max-width: 120px;
  height: auto;
  border: 1px solid #000;
  border-radius: 6px;
  display: block;
}

Pertahankan Tampilan Grid Tetap Rapi

Jika Anda menggunakan mode grid, panah dan jarak tidak akan mengganggu. Semua pengaturan list hanya berlaku untuk tampilan daftar.

ul.wp-block-latest-posts__list.is-grid li::before {
  content: none !important;
}

Dengan pengaturan ini, tampilan list widget WordPress menjadi lebih rapi, profesional, dan mudah terbaca. Anda tetap bisa menyesuaikan warna panah, border gambar, atau jarak antar item sesuai selera tanpa mengganggu tampilan grid.