Cara Optimalkan Tampilan List Widget di WordPress

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

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.

RSS: Digital Skills

• Analisis PermenPANRB Nomor 7 Tahun 2026 dan Dampak terhadap karier guru dan Pengawas
• 
  Refleksi Pengawas Mutu Pendidikan Madrasah: Pengawasan Yang Memberdayakan
• 
  JUMAT BERSEPEDA di Madrasah: 9 Nilai Integritas Antikorupsi
• 
  Tips Merancang Implementasi dan Melaksanakan Pendidikan Antikorupsi di Sekolah secara kreatif
• 
  Panduan Pendidikan Antikorupsi di Sekolah: Sebuah Kurikulum Insersi
• 
  FGD Pedoman Pendidikan Antikorupsi di Madrasah: Sebuah Wawasan Penguatan Karakter Integritas

Lainya

Artikel Terbaru

• Analisis PermenPANRB Nomor 7 Tahun 2026 dan Dampak terhadap karier guru dan Pengawas
• Refleksi Pengawas Mutu Pendidikan Madrasah: Pengawasan Yang Memberdayakan
• JUMAT BERSEPEDA di Madrasah: 9 Nilai Integritas Antikorupsi
• Tips Merancang Implementasi dan Melaksanakan Pendidikan Antikorupsi di Sekolah secara kreatif
• Panduan Pendidikan Antikorupsi di Sekolah: Sebuah Kurikulum Insersi
• FGD Pedoman Pendidikan Antikorupsi di Madrasah: Sebuah Wawasan Penguatan Karakter Integritas