Skip to main content

Cara Aktifkan Buka dan Tutup Komentar Balasan


Cara membuat toggle buka tutup komentar balasan khususnya template Contempo yang memang pada template tersebut fitur ini di sembunyikannya dan akan kita coba aktifkan kembali. Karena lumayan berguna terutama buat blog yang memiliki banyak komentar dari pengunjungnya, misalkan sampai ratusan komentar dan tentu ujung jari bakal panas scroll2 kebawah terutama bila browsing pakai hp.

Pada template contempo, source struktur HTML pada fitur tersebut persis seperti dibawah ini dan saya rasa strukturnya sama saja pada template blogger lainnya.

<div class="comment-replies">
<div id="otomatis" class="comment-thread inline-thread">
<span class="thread-toggle thread-expanded">
<span class="thread-arrow"></span>
<span class="thread-count"><a target="_self">Balasan</a></span>
</span>
<ol id="otomatis" class="thread-chrome thread-expanded">
<div></div>
<li>Daftar komentar balasan.</li>
</ol>
</div>
</div>

Perhatikan struktur diatas, style balasan komentar dikuasai oleh element selector comment-replies.

Ada banyak hal yang dapat anda lakukan pada struktur tersebut dengan kendali css seperti menambahkan icon pada selector thread-arrow atau mengubah anchor text dengan text lainnya. Tapi saya menyukai kesederhanaan, yang saya bagikan disini hanyalah cara mengaktifkan buka dan tutup balasan komentar.

Umumnya yang sering saya temukan, balasan komentarnya otomatis terbuka baru kemudian ditutup. Kita akan membuat yang sebaliknya di disini, kita akan membuat balasan komentar tertutup baru kemudian dibuka, jadi bagi yang ingin atau berkepentingan melihat balasan komentar dia bisa membukanya, tenang saja tidak loading kok, sesuai tujuan utama untuk meminimalisir balasan komentar agar blog tidak memanjang kebawah kecuali jika memang anda menyukai yang memanjang kebawah hehe.

Kembali perhatikan struktur HTML diatas, pada css template contempo, selector ".thread-count" di set ke hidden atau display none, langkah yang dapat kita lakukan untuk mengaktifkan kembali fitur buka tutup balasan komentar tersebut adalah sebagai berikut:

1. Mencari selector seperti dibawah ini, bisa melalui fitur Edit HTML Blogger, dan cari kata: ".thread-count", setelah ketemu lalu beri tanda seperti ini, di awali dengan ini /* dan diakhiri dengan ini */.

Contoh:
/*
#comments .comment-thread .thread-count{
display:none
}
*/

2. Selanjutnya, tambahkan potongan css berikut ini dibagian bawah style yang anda tandai diatas, tambahkan diluar tanda ini /* */ bukan didalamnya.

.comments .comments-content .comment-replies{
margin:5px 0
}
.comments .thread-toggle a{
font-weight:normal
}
.comments .thread-toggle .thread-count a{
font-weight:normal
}
.comments .thread-toggle{
padding:10px 0 10px 0
}
.comments .thread-toggle.thread-expanded{
font-weight:normal
}
.comments .thread-chrome.thread-expanded{
display:none;
border:none;
padding:0
}

3. Selesai, cukup dengan dua langkah saja. style diatas cuma style normal, tidak akan mempengaruhi style lainnya, hanya berfungsi untuk buka tutup saja, anda bisa memodifikasinya lagi agar lebih cantik.