You are currently viewing Mengubah Tampilan Kolom Komentar dengan Custom CSS di WordPress

Mengubah Tampilan Kolom Komentar dengan Custom CSS di WordPress

Menggunakan kolom komentar yang menarik dan user-friendly di website WordPress Anda dapat meningkatkan interaksi pengunjung dan memberikan pengalaman pengguna yang lebih baik. Meskipun WordPress menyediakan kolom komentar bawaan, tampilannya seringkali standar dan kurang menarik. Dengan beberapa penyesuaian CSS, kita bisa mengubah tampilan kolom komentar menjadi lebih modern dan menarik.

 

Script dan Tampilan- Versi 1

Tampilan Hasil

CSS dibawah ini, akan menghasilkan tampilan komentar seperti dibawah ini.

Tampilan Komentar CSS

Kode CSS yang bisa digunakan

Untuk mengubah tampilan kolom komentar, silahkan gunakan kode CSS ini. Injeksikan kode ini ke dalam tema WordPress Anda.

/*=====================================
 Comment Template CSS
========================================*/

.comments-area {
    margin-top: 40px;
}

.comments-area h2.comments-title {
    font-size: 25px;
    margin-bottom: 20px;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-meta {
    margin-bottom: 20px;
}

.comment-meta a {
    color: #333;
}

.comment-meta img {}

.comment-author.vcard {
    position: relative;
    padding-left: 50px;
}

.comment-author.vcard img {
    position: absolute;
    left: 0;
    top: 5px;
}

.comment-metadata {
    margin-left: 50px;
}

.comments-area table {
    border-left: 1px solid #dddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.comments-area table td,
.comments-area table th {
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
}

.comments-area th {
    background: #278cc1;
    color: #fff;
}

.comments-area dd {
    margin-bottom: 15px;
}

.comments-area .comments-content ul,
.comments-area .comments-content ol {
    padding-left: 15px;
}

.comments-area .comment-content ul,
.comments-area .comment-content ol {
    padding-left: 15px;
}

.comment-reply-link {
    background: #006400; /* Warna hijau tua */
    display: inline-block;
    padding: 5px 20px;
    color: #fff !important; /* Warna teks putih */
    border-radius: 5px;
    text-decoration: none; /* Menghapus underline jika ada */
    transition: background-color 0.3s ease; /* Menambahkan transisi untuk efek hover yang halus */
}

.comment-reply-link:hover {
    background: #000000; /* Warna hitam saat hover */
}

.comment-list li.comment {
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
}

.comment-metadata {
    font-size: 80%;
}

.comment-reply-link {
    margin-top: 10px;
}

.comment-list li ol.children {
    padding-left: 50px;
    margin: 0;
    list-style: none;
    margin-top: 25px;
}

.comment-list li ol.children ol.children {
    padding-left: 20px;
}

.comment-list li.comment:last-child {
    border-bottom: 0px solid;
    padding-bottom: 0;
    margin-bottom: 0;
}

.comment-respond {
    margin-top: 50px;
}

.comment-notes {
    font-size: 90%;
    margin-bottom: 40px;
}

.comment-form label {
    display: block;
    margin-bottom: 10px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    margin-bottom: 20px;
}

.comment-form input[type=submit] {
    width: auto;
}

 

Script dan Tampilan- Versi 2

Tampilan Hasil

CSS versi ke-2 dibawah ini, akan menghasilkan tampilan komentar seperti dibawah ini.

Perbedaan antara kode CSS yang pertama adalah: Warna tombol nya berubah menjadi putih, dengan garis tepi. Namun, apabila kursor diarahkan ke tombol “balas” tersebut, warna tombol nya akan berubah menjadi hitam.

Tampilan kolom komentar V2

Kode CSS- Versi 2

Untuk mengubah tampilan kolom komentar seperti gambar diatas, silahkan gunakan kode CSS versi ke-2 ini. Injeksikan kode ini ke dalam tema WordPress Anda.

/*=====================================
 Comment Template CSS
========================================*/

.comments-area {
    margin-top: 40px;
}

.comments-area h2.comments-title {
    font-size: 25px;
    margin-bottom: 20px;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-meta {
    margin-bottom: 20px;
}

.comment-meta a {
    color: #333;
}

.comment-meta img {}

.comment-author.vcard {
    position: relative;
    padding-left: 50px;
}

.comment-author.vcard img {
    position: absolute;
    left: 0;
    top: 5px;
}

.comment-metadata {
    margin-left: 50px;
}

.comments-area table {
    border-left: 1px solid #dddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.comments-area table td,
.comments-area table th {
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
}

.comments-area th {
    background: #278cc1;
    color: #fff;
}

.comments-area dd {
    margin-bottom: 15px;
}

.comments-area .comments-content ul,
.comments-area .comments-content ol {
    padding-left: 15px;
}

.comments-area .comment-content ul,
.comments-area .comment-content ol {
    padding-left: 15px;
}

.comment-reply-link {
    background: #ffffff; /* Warna putih untuk tombol */
    display: inline-block;
    padding: 5px 20px;
    color: #333 !important; /* Warna teks abu-abu */
    border: 1px solid #808080; /* Garis tepi warna abu-abu */
    border-radius: 5px;
    text-decoration: none; /* Menghapus underline jika ada */
    transition: background-color 0.3s ease, color 0.3s ease; /* Menambahkan transisi untuk efek hover yang halus */
}

.comment-reply-link:hover {
    background: #000000; /* Warna hitam saat hover */
    color: #ffffff !important; /* Warna teks putih saat hover */
}

.comment-list li.comment {
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
}

.comment-metadata {
    font-size: 80%;
}

.comment-reply-link {
    margin-top: 10px;
}

.comment-list li.ol.children {
    padding-left: 50px;
    margin: 0;
    list-style: none;
    margin-top: 25px;
}

.comment-list li ol.children ol.children {
    padding-left: 20px;
}

.comment-list li.comment:last-child {
    border-bottom: 0px solid;
    padding-bottom: 0;
    margin-bottom: 0;
}

.comment-respond {
    margin-top: 50px;
}

.comment-notes {
    font-size: 90%;
    margin-bottom: 40px;
}

.comment-form label {
    display: block;
    margin-bottom: 10px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    margin-bottom: 20px;
}

.comment-form input[type=submit] {
    width: auto;
}

 

Kesimpulan

Dengan menyesuaikan CSS, kita dapat meningkatkan tampilan dan fungsi kolom komentar di WordPress. Penyesuaian ini tidak hanya membuat kolom komentar lebih menarik secara visual, tetapi juga meningkatkan pengalaman pengguna dengan membuatnya lebih user-friendly. Dengan langkah-langkah sederhana namun efektif ini, kolom komentar di website WordPress Anda akan tampil lebih modern dan interaktif, mendorong pengunjung untuk lebih sering berkomentar dan berinteraksi.

Penyesuaian CSS adalah cara yang sangat efisien untuk mencapai tampilan yang Anda inginkan tanpa harus mengubah struktur HTML secara mendasar. Pastikan untuk selalu memeriksa hasil akhir di berbagai perangkat dan browser untuk memastikan konsistensi tampilan.

Leave a Reply