Solusi Ampuh Mengatasi Tombol "Balas" Komentar Berantakan Jadi Rapih

Gambar 1: Blogger memaduka Coding dari AI: Gemini, ChatGPT dan Meta

Potingan ini hasil kolaborasi saya sebagai blogger memaduka Coding dari AI: Gemini, ChatGPT dan Meta Setelah berkali-kali gagal akhirnya berhasi merapikan kolom komentar.

Solusi Ampuh Mengatasi Tombol "Balas" Komentar Blogger yang Duplikat dan Berantakan

Pernahkah Anda mengalami masalah di mana tombol "Balas" atau "Reply" pada kolom komentar Blogger muncul berkali-kali secara vertikal (bertumpuk)? Selain merusak pemandangan, hal ini juga membingungkan pengunjung. Tidak hanya itu, terkadang posisi foto profil (avatar) juga berantakan dan tidak sejajar dengan nama komentator.

Setelah melalui berbagai eksperimen, ternyata masalah ini sering terjadi pada tema Blogger Layout V2 yang menggunakan skrip modifikasi. Berikut adalah solusi permanen untuk merapikannya menggunakan teknik CSS modern.

Mengapa Teks "Balas" Bertumpuk?

Gambar 2: Tampilan Komentar Brantakan

Biasanya hal ini disebabkan oleh bentrokan antara label otomatis dari sistem Blogger dengan skrip JavaScript di dalam tema yang mencoba mengganti teks "Reply" menjadi "Balas" secara paksa. Hasilnya, teks tersebut tertulis berulang-ulang di satu tempat yang sama.

Langkah-Langkah Perbaikan

1. Menghilangkan Duplikasi Tombol Balas

Langkah pertama adalah menyembunyikan semua elemen "Balas" yang duplikat dan memunculkan kembali hanya satu tombol yang berfungsi dengan benar.

Copy dan paste kode berikut sebelum kode </style> atau ]]></b:skin> pada editor HTML tema Anda:

CSS

/* Menghilangkan semua teks balasan yang duplikat */
.comment-replies a,
.comment-reply,
.comment-actions a {
  display: none !important;
}

/* Memunculkan kembali hanya satu tombol utama agar rapi */
.comment-actions a:first-child {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: bold;
  color: #007bff !important; /* Warna biru */
  margin-top: 10px;
}

2. Merapikan Tata Letak (Foto di Kiri, Nama di Kanan)

Agar tampilan terlihat profesional seperti media besar, kita akan menggunakan sistem Flexbox. Ini akan memaksa foto profil tetap di sebelah kiri, sedangkan nama, waktu, dan isi komentar berada rapi di sebelah kanannya.

Tambahkan kode ini di bawah kode sebelumnya:

CSS

/* === STRUKTUR FLEXBOX KOMENTAR === */
.comments .comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* === PENGATURAN FOTO (AVATAR) === */
.comments .avatar-image-container {
  flex: 0 0 48px; /* Mengunci lebar foto agar tidak gepeng */
}

.comments .avatar-image-container img {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* Membuat foto profil bulat */
  object-fit: cover;
}

/* === AREA KONTEN (KANAN FOTO) === */
.comments .comment-content {
  flex: 1;
}

/* === NAMA & WAKTU === */
.comments .comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.comments .comment-author {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
}

.comments .comment-timestamp {
  font-size: 12px;
  color: #777;
}

/* === ISI TEKS KOMENTAR === */
.comments .comment-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

Tips Tambahan

Jika setelah memasang kode di atas tampilan belum berubah, pastikan Anda melakukan Hard Refresh (tekan Ctrl + F5) pada browser Anda untuk menghapus cache lama. Jika Anda menggunakan skrip pemotong teks otomatis di bagian bawah tema (biasanya mengandung kata replaceText), sebaiknya hapus atau beri tanda komentar pada bagian tersebut karena sering menjadi pemicu teks bertumpuk.

Gambar 3: Tampilan komentar yang rapih

Kesimpulan

Dengan perpaduan teknik menyembunyikan elemen duplikat dan penggunaan Flexbox, kolom komentar blog yang tadinya berantakan bisa menjadi sangat rapi dan nyaman dibaca. Selamat mencoba!