Dalam era digital saat ini, tampilan website yang menarik dan interaktif menjadi kunci untuk menarik perhatian pengunjung. Salah satu elemen yang sering kali mendapat perhatian adalah kolom komentar. Artikel ini akan membahas cara mengubah tampilan kolom komentar untuk membuatnya lebih menarik dan mudah dibaca.
Tampilan Komentar Sebelum Diubah
Seperti yang terlihat pada gambar di atas, tampilan kolom komentar awal mungkin terlihat monoton dan kurang menarik. Ini adalah tampilan standar yang sering kita temui di berbagai website.
Implementasi Skrip CSS
Untuk mengubah tampilan kolom komentar, kita akan menggunakan skrip CSS berikut :
/* Menghilangkan tanggal */
.comment-date, .comment-time {
display: none;
}
/* Memberikan garis tepi warna hijau pada sisi kiri */
.comment-body {
border-left: 3px solid green;
padding-left: 10px;
margin-bottom: 15px;
}
/* Memberikan jarak di kolom balasan */
.reply {
margin-top: 5px;
}
/* Membuat teks nama menjadi bold */
.comment-author .fn {
font-weight: bold;
}
/* Menonaktifkan link profil */
.comment-author .url {
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
}
/* Margin kiri untuk komentar balasan di desktop */
.comment .children .comment {
margin-left: 20px;
}
/* Media Query untuk Tampilan Tablet */
@media screen and (min-width: 601px) and (max-width: 1024px) {
.comment .children .comment {
margin-left: 15px; /* Margin yang disesuaikan untuk tablet */
}
/* Menyesuaikan ukuran garis tepi dan padding pada tablet */
.comment-body {
border-left: 2.5px solid green;
padding-left: 8px;
}
}
/* Media Query untuk Tampilan Mobile */
@media screen and (max-width: 600px) {
.comment .children .comment {
margin-left: 10px; /* Margin yang lebih kecil untuk layar mobile */
}
/* Menyesuaikan ukuran garis tepi dan padding pada mobile */
.comment-body {
border-left: 2px solid green;
padding-left: 5px;
}
}Tujuan dari pembuatan Skrip CSS
- Menghilangkan tanggal dan waktu komentar.
- Memberikan garis tepi berwarna hijau pada sisi kiri dari setiap komentar.
- Membuat teks nama pengomentar menjadi tebal.
- Menonaktifkan link profil untuk menghindari distraksi.
- Mengatur margin untuk komentar balasan, serta penyesuaian untuk tampilan tablet dan mobile.
Tampilan Komentar Setelah Diubah
Setelah skrip CSS diterapkan, tampilan kolom komentar menjadi lebih menarik dan terstruktur. Garis tepi warna hijau memberikan aksen yang segar, dan penghilangan tanggal membantu fokus pembaca kepada isi komentar.
Konfigurasi Foto Profil
Mengatur tampilan foto profil pada kolom komentar di website, merupakan langkah yang penting untuk memberikan tampilan yang lebih personal dan interaktif. Berikut adalah langkah-langkah untuk menampilkan atau menyembunyikan foto profil pengguna pada kolom komentar :
1. Masuk ke Dashboard Admin
Pertama, login ke dashboard admin situs Anda.
2. Buka Pengaturan Diskusi
Dari menu di dashboard, pilih ‘Settings’ dan kemudian klik pada opsi ‘Discussion’.
3. Atur Tampilan Avatar
Dalam menu ‘Discussion’, Anda akan menemukan opsi ‘Show Avatars’.
- Untuk menampilkan foto profil, centang kotak di samping ‘Show Avatars’.
- Untuk menyembunyikan foto profil, pastikan kotak di samping ‘Show Avatars’ tidak dicentang.
4. Simpan Perubahan
Setelah memilih pengaturan yang diinginkan, klik ‘Save Changes’ untuk menerapkan perubahan tersebut.
Kesimpulan
Dengan perubahan sederhana menggunakan CSS, kita dapat mengubah tampilan kolom komentar menjadi lebih menarik dan interaktif. Perubahan ini tidak hanya memperbaiki estetika visual tetapi juga meningkatkan pengalaman pengguna secara keseluruhan.
