Cara Membuat Tampilan Komentar Blogger Modern

Halo sobat blogger! Bosen nggak sih ngelihat tampilan komentar bawaan Blogger yang dari dulu gitu-gitu aja? Apalagi kalau artikel kita lagi rame, balasan komentar yang panjang ke bawah sering bikin pusing bacanya.

Nah, di artikel kali ini, saya mau bagiin tutorial lengkap cara merombak tampilan komentar Blogger kamu jadi super modern, bersih, dan berasa kayak pakai sistem *framework* kekinian. Nggak cuma rapi, kita juga bakal nambahin fitur Admin Badge (biar kamu kelihatan beda saat balas komentar) dan Tombol Toggle untuk menyembunyikan/menampilkan balasan (mirip komentar Instagram atau YouTube!).

Langkah 1: Merombak Struktur HTML/XML Komentar

Pertama, kita harus ubah kerangka bawaan Blogger biar lebih gampang diatur pakai CSS. Kita akan cari kode yang mengatur item komentar.

1. Masuk ke dashboard Blogger > Tema > Edit HTML.
2. Klik di mana saja di dalam area kode, lalu tekan Ctrl + F.
3. Cari kode ini: <b:includable id='commentItem' var='comment'>
4. Ganti semua kode mulai dari tag tersebut sampai penutupnya </b:includable> dengan kode baru di bawah ini:

<b:includable id='commentItem' var='comment'>
  <div expr:class='data:comment.adminClass ? "comment " + data:comment.adminClass : "comment"' expr:id='"c" + data:comment.id'>
    
    <!-- Memanggil Avatar -->
    <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
    
    <div class='comment-block'>
      <div class='comment-header'>
        <span class='user'>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
        </span>
        <span class='datetime'>
          <a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>
        </span>
      </div>
      
      <div expr:class='"comment-content" + (data:comment.isDeleted ? " deleted" : "")'>
        <data:comment.body/>
      </div>
      
      <div class='comment-actions'>
        <b:include data='comment' name='commentDeleteIcon'/>
      </div>
    </div>
  </div>
</b:includable>

Langkah 2: Mempercantik dengan CSS (Admin Badge & Styling)

Kerangkanya udah siap, sekarang saatnya kita *make over* tampilannya. Di sini kita akan buat avatarnya jadi bulat, bikin garis untuk komentar balasan (*threaded*), dan ngasih label "Admin" otomatis.

1. Masih di Edit HTML, sekarang cari kode penutup CSS, yaitu ]]></b:skin> atau </style>.
2. *Paste* kode CSS ini tepat di atas kode penutup tersebut:

/* --- DESAIN KOMENTAR MODERN --- */
#comment-holder { font-family: sans-serif; }
.comments .comment-thread { list-style: none; padding: 0; margin: 0; }
.comments .comment { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eaeaea; }
.comments .comment:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Garis Thread Balasan */
.comments .comment-thread ol { border-left: 2px solid #eaeaea; padding-left: 20px; margin-left: 22px; list-style: none; }
.comments .comment-thread ol .comment { margin-bottom: 20px; padding-bottom: 20px; }
.comment-replies { margin-top: 15px; } 

/* Desain Avatar Kekinian */
.comments .avatar-image-container { float: left; width: 46px; height: 46px; position: relative; }
.comments .avatar-image-container img { width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.comments .comment.blog-author .avatar-image-container img { border: 3px solid #ffc107; padding: 2px; background: #fff; }

/* Isi Komentar */
.comments .comment-block { margin-left: 65px; position: relative; }
.comments .comment-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.comments .comment-header .user { font-weight: 700; font-size: 1.05rem; color: #111; text-decoration: none; display: flex; align-items: center;}
.comments .comment-header .user a { color: #111; text-decoration: none; }

/* BADGE ADMIN OTOMATIS */
.comments .comment.blog-author .comment-header .user::after { 
  content: 'Admin'; 
  background: #ffc107; 
  color: #111; 
  font-size: 0.75rem; 
  padding: 2px 8px; 
  border-radius: 6px; 
  margin-left: 8px; 
  font-weight: 700; 
  border: 1px solid #111; 
}

.comments .comment-header .datetime { font-size: 0.8rem; color: #666; }
.comments .comment-header .datetime a { color: inherit; text-decoration: none; }
.comments .comment-content { font-size: 0.95rem; line-height: 1.6; color: #333; margin-bottom: 12px; }

/* Tombol Balas & Hapus */
.comments .comment-actions { font-weight: 700; font-size: 0.8rem; }
.comments .comment-actions a { color: #666; display: inline-flex; align-items: center; gap: 5px; margin-right: 15px; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; }
.comments .comment-actions a:hover { color: #ffc107; }

/* Desain Toggle Lihat Balasan */
.replies-toggle-wrap { display: flex; align-items: center; gap: 15px; margin: 15px 0 20px 65px; }
.btn-toggle-replies { background: transparent; border: none; color: #d97706; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-toggle-replies:hover { color: #111; text-decoration: underline; }
.toggle-line { flex-grow: 1; height: 1px; background: #eaeaea; }

/* Hapus elemen bawaan yang gak perlu */
.item-control .goog-toggle-button, .thread-toggle, .thread-count, .loadmore, .paging-control-container, .continue-thread, .empty-thread { display: none !important; }

/* Responsif HP */
@media (max-width: 768px) {
    .comments .comment-block, .replies-toggle-wrap { margin-left: 55px; }
    .comments .avatar-image-container { width: 40px; height: 40px; }
}

Langkah 3: Menambahkan Fitur Toggle Balasan (JavaScript)

Biar area komentar nggak makan tempat kalau ada yang balas-balasan sampai belasan kali, kita tambahin script untuk menyembunyikan balasan tersebut. Tenang, ini pure JavaScript kok, jadi ringan dan nggak bikin loading blog lemot!

1. Scroll ke bagian paling bawah di editor HTML-mu, lalu cari kode </body>.
2. *Paste* script berikut ini tepat di atas kode </body>:

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    function initCommentToggle() {
        const topLevelComments = document.querySelectorAll('#comment-holder > .comment-thread > ol > .comment');
        topLevelComments.forEach(comment => {
            const inlineThread = comment.querySelector('.comment-replies > .comment-thread.inline-thread');
            if (inlineThread) {
                const threadOl = inlineThread.querySelector('ol');
                if (threadOl && threadOl.children.length > 0 && !comment.querySelector('.replies-toggle-wrap')) {
                    
                    // Sembunyikan balasan secara default
                    threadOl.style.display = 'none'; 
                    
                    // Buat tombol toggle
                    const wrap = document.createElement('div');
                    wrap.className = 'replies-toggle-wrap';
                    wrap.innerHTML = `
                        <button class="btn-toggle-replies" data-state="collapsed">
                            ▾ <span>Lihat Balasan</span>
                        </button>
                        <div class="toggle-line"></div>
                    `;
                    
                    // Sisipkan sebelum kotak balasan
                    inlineThread.parentNode.insertBefore(wrap, inlineThread);
                    
                    // Fungsi klik
                    const btn = wrap.querySelector('.btn-toggle-replies');
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const state = this.getAttribute('data-state');
                        if (state === 'expanded') {
                            this.setAttribute('data-state', 'collapsed');
                            this.querySelector('span').innerText = `Lihat Balasan`;
                            this.innerHTML = `▾ <span>Lihat Balasan</span>`;
                            threadOl.style.display = 'none';
                        } else {
                            this.setAttribute('data-state', 'expanded');
                            this.querySelector('span').innerText = 'Sembunyikan Balasan';
                            this.innerHTML = `▴ <span>Sembunyikan Balasan</span>`;
                            threadOl.style.display = 'block';
                        }
                    });
                }
            }
        });
    }

    // Pantau jika komentar dimuat (Load More/Threaded)
    const commentObserver = new MutationObserver(() => { initCommentToggle(); });
    const commentArea = document.getElementById('comments') || document.getElementById('comment-holder');
    if(commentArea) {
        commentObserver.observe(commentArea, { childList: true, subtree: true });
        initCommentToggle();
    }
});
//]]>
</script>

Selesai! Saatnya Simpan Tema

Setelah tiga langkah di atas selesai, langsung klik ikon Simpan / Save (biasanya ikon disket di pojok kanan bawah atau atas). Coba buka salah satu artikel kamu yang ada komentarnya dan lihat keajaibannya!

Komentar blog kamu sekarang udah jauh lebih modern, rapi, dan fungsional. Kalau ada kode yang *error* atau tampilannya kurang nge-pas di template kamu, jangan sungkan buat nanya di kolom komentar di bawah ya. Selamat mencoba dan happy coding!