Berikut adalah pembaruan pada bagian Article Grid di template sebelumnya agar menampilkan label secara dinamis:
✏️ Kode Pembaruan Bagian Article Grid
Ganti seluruh bagian ... pada template lama dengan kode berikut:
Artikel Kesehatan Terbaru
Lihat Semua →
No Image
Penjelasan Cara Kerjanya
1. : Mengecek apakah postingan tersebut memiliki label atau tidak. Jika tidak ada label, bagian kategori akan disembunyikan agar tampilan tetap rapi.
2. : Melakukan perulangan untuk semua label yang ada di postingan.
3. : Ini kuncinya! Kita hanya mengambil label pertama saja. Jika sebuah postingan memiliki banyak label (misal: "Kesehatan", "Diet", "Vitamin"), hanya "Kesehatan" yang akan muncul di kartu. Ini mencegah tampilan menjadi penuh dan berantakan.
4. expr:href='data:label.url': Membuat label tersebut menjadi link aktif. Saat diklik, user akan diarahkan ke halaman arsip khusus untuk label tersebut.
⚠️ Tips Penting Agar Tampilan Maksimal
* Konsistensi Label: Usahakan nama label Anda konsisten. Misalnya, pilih salah satu antara "Tips Kesehatan" atau "Kesehatan". Jangan gunakan keduanya karena akan muncul sebagai dua kategori berbeda di homepage.
* Warna Label Dinamis (Opsional): Jika Anda ingin warna label berubah sesuai kategorinya (misal: Diabetes = Merah, Jantung = Biru), Anda perlu menambahkan CSS tambahan dengan selector berdasarkan nama label, namun cara paling aman dan ringan adalah menggunakan satu warna netral (seperti biru #0056b3) untuk semua label agar tetap terlihat profesional seperti Alodokter.
* Snippet Artikel: Pastikan setiap postingan memiliki paragraf pembuka yang jelas, karena akan mengambil teks awal postingan tersebut sebagai deskripsi di kartu.
Apakah Anda juga ingin saya buatkan kode untuk menambahkan tombol "Baca Selengkapnya" di setiap kartu artikel agar CTR menuju halaman postingan meningkat?
Tidak ada komentar:
Posting Komentar