Cara Memperbaiki Threaded Comment Blogger yang Rusak di Template Custom

---

Threaded comment Blogger memungkinkan pengunjung membalas komentar tertentu sehingga percakapan dapat mengikuti konteks komentar induknya. Pada template Blogger custom, fitur ini cukup sering bermasalah: tombol Balas tidak merespons, reply hanya menuju form komentar paling bawah, nested comment terlihat flat, tombol Balasan tidak dapat collapse, editor komentar berada di lokasi yang salah, sampai CSS template justru menutupi struktur thread yang sebenarnya sudah dibuat oleh Blogger.

BLOGGER COMMENT SYSTEM Threaded Comment Repair Lab Native Setting · Reply Engine · Debugging · Timeline UI

TESTED

Native Setting Periksa konfigurasi Blogger sebelum menyentuh kode template.

Reply Engine Pertahankan mekanisme Balas native selama masih bekerja.

Thread Structure Kenali parent, inline-thread, replybox dan thread-toggle.

Timeline UI Custom tampilan dilakukan setelah engine kembali stabil.

Catatan pengujian Panduan ini menggabungkan dokumentasi Blogger, beberapa metode perbaikan yang populer di komunitas Blogger termasuk pendekatan Igniel, serta studi kasus langsung pada template custom yang mengalami error Reply, nested flat, thread-toggle, comment editor, tombol Hapus dan plugin emoticon.

Kenapa Threaded Comment Blogger Bisa Bermasalah?

Blogger sebenarnya sudah mempunyai engine threaded comment. Engine inilah yang mengatur komentar utama, hubungan reply, comment editor, inline thread, tombol Balas dan status thread terbuka atau tertutup. Dengan kata lain, tampilan komentar yang terlihat flat belum tentu berarti informasi reply benar-benar hilang.

Masalah lebih sering terjadi karena lapisan template di atas engine Blogger sudah berubah. Template lama mungkin masih mempunyai script komentar generasi sebelumnya, CSS dapat menyembunyikan .comment-replies, optimasi dapat memblokir JavaScript Blogger, sedangkan script custom dapat memindahkan elemen native ke lokasi yang tidak lagi sesuai dengan asumsi renderer.

Tombol Balas terlihat tetapi tidak bekerja.

Balas hanya membawa viewport ke form paling bawah.

Reply terkirim tetapi muncul sebagai komentar sejajar.

Tombol Balasan tidak terlihat atau tidak dapat collapse.

Balas atau Hapus pindah ke segmen nested yang salah.

Console menghasilkan error null ketika komentar dirender.

Kesalahan paling umum Jangan langsung mengganti seluruh threaded_comment_js. Banyak kasus yang terlihat seperti kerusakan JavaScript ternyata hanya berasal dari setting Blogger, Site Feed, CSS visibility, atau dependency yang tidak dimuat.

Diagnosis Cepat Sebelum Mengubah Template

Sebelum membuka Edit HTML, lakukan pemeriksaan berurutan. Cara ini membantu menentukan lapisan mana yang benar-benar rusak sehingga kita tidak menambahkan patch ke bagian yang sebenarnya masih sehat.

01 Comment Location Embedded / Disematkan

02 Comment Feed Per-post feed jangan None

03 Console Cari error JavaScript

04 DOM Cari inline-thread

05 CSS Periksa hidden / display

SETTING RENDERER JAVASCRIPT DOM CSS

Periksa Setting Native Comment Blogger

Langkah pertama berada pada dashboard Blogger. Lokasi komentar sebaiknya menggunakan mode Disematkan / Embedded. Mode tersebut memungkinkan respons terhadap komentar ditampilkan langsung pada halaman posting dan merupakan fondasi paling aman untuk threaded discussion.

Blogger Setelan Komentar Lokasi komentar: Disematkan

Jika setting masih menggunakan Full Page atau Popup, ubah terlebih dahulu lalu lakukan pengujian ulang sebelum mengedit template. Ini merupakan pemeriksaan sederhana tetapi cukup banyak kasus Reply Blogger selesai pada tahap ini.

Test pertama Buka artikel yang sudah mempunyai parent comment dan reply, lalu klik Balas. Jangan memakai posting kosong sebagai satu-satunya bahan pengujian.

Per-post Comment Feed yang Sering Terlewat

Salah satu studi kasus yang menarik berasal dari Blogger Community. Dua blog menggunakan template yang sama. Pada satu blog threaded comment bekerja, sedangkan blog lainnya hanya menampilkan komentar non-threaded. Perbedaannya ternyata bukan pada template, tetapi pada Site Feed.

Jika Izinkan feed blog menggunakan mode Custom, periksa opsi Per-post comment feeds. Jangan biarkan nilainya None / Tidak Ada ketika blog membutuhkan threaded comment.

BERMASALAH Allow Blog Feed: Custom Per-post comment feeds: None

DIUJI BERHASIL Allow Blog Feed: Custom Per-post comment feeds: Full

Blogger Setelan Feed situs Per-post comment feeds

Jika setelah setting ini threaded comment kembali muncul, tidak ada alasan untuk mengganti JavaScript template. Inilah contoh mengapa diagnosis harus dilakukan dari konfigurasi Blogger terlebih dahulu.

Bedakan Native Comment dan Threaded Comment Hack

Template Blogger lama tidak selalu menggunakan renderer threaded modern. Sebagian template mempunyai sistem Reply custom yang bekerja dengan memodifikasi URL #comment-editor dan memasukkan parentID. Script semacam ini sering memiliki fungsi seperti:

Display_Reply_Form() Reset_Comment_Form() Cform_Ins_ParID() Valid_Par_Id()

Pada metode tersebut, tombol Reply bisa kembali bekerja setelah fungsi lama diperbaiki, tetapi nested visual belum tentu ikut kembali. Inilah alasan beberapa tutorial memperbaiki tombol Reply tetapi komentar masih terlihat flat.

REPLY FUNCTION Menentukan komentar yang sedang dibalas.

THREAD RENDERER Menentukan bagaimana parent dan child ditampilkan.

THREADED COMMENT Fungsi dan struktur harus sama-sama sehat.

Periksa comment_picker dan threaded_comments

Dokumentasi Blogger untuk template custom menggunakan conditional yang memilih antara komentar threaded dan komentar biasa. Pada template custom yang sangat lama, bagian ini dapat hilang atau masih selalu memanggil includable comments.

<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>

Jika template hanya mempunyai:

<b:include data='post' name='comments'/>

periksa apakah conditional threaded memang hilang. Pada template yang mempunyai comment_picker, prinsipnya tetap sama: ketika showThreadedComments aktif, renderer harus diarahkan ke threaded_comments.

<b:includable id='comment_picker' var='post'> <b:if cond='data:post.commentSource == 1'> <b:include data='post' name='iframe_comments'/> <b:elseif cond='data:post.showThreadedComments'/> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:includable>

Jangan langsung override seluruh renderer. Jika struktur native masih tersedia, gunakan renderer Blogger dan custom tampilannya melalui CSS. Mengganti implementasi penuh membuat template ikut bertanggung jawab terhadap kompatibilitas renderer tersebut.

Tombol Balas Terlihat tetapi Tidak Bekerja

Salah satu metode yang pernah populer pada template Blogger Indonesia adalah menyembunyikan JavaScript bundle bawaan Blogger untuk mengejar optimasi. Teknik semacam ini memang dapat mengurangi resource, tetapi juga berisiko menghilangkan dependency yang dipakai sistem komentar.

Jika template menggunakan modifikasi penutup body, head, b:js='false', atau teknik lain yang sengaja memblokir script Blogger, lakukan test menggunakan versi normal terlebih dahulu.

</body>

Jika setelah bundle Blogger kembali dimuat tombol Balas bekerja, akar masalahnya bukan HTML tombol tetapi JavaScript dependency yang sebelumnya ikut diblokir.

CASE 01

Gejala Tombol Balas terlihat tetapi klik tidak memberi respons.

Periksa JavaScript Blogger, b:js, modifikasi body/head, Console.

Hindari Membuat tombol Reply baru sebelum memastikan event native benar-benar hilang.

Error Cannot Read Properties of Null

Template custom lama sering mengasumsikan data komentar selalu tersedia. Ketika data ternyata null, seluruh script dapat berhenti dan fitur lain setelah error tersebut tidak pernah dieksekusi.

BROWSER CONSOLE

Uncaught TypeError: Cannot read properties of null (reading 'length')

Daripada menutupi error menggunakan try/catch besar, berikan guard tepat setelah data dibuat.

items = Array.isArray(items) ? items : []; msgs = msgs || {}; config = config || {};

Prinsip yang sama berlaku pada selector DOM. Pastikan elemen ditemukan sebelum membaca property atau menjalankan method.

var editor = document.getElementById( "comment-editor" ); if(editor){ // jalankan fungsi }

Console lebih penting daripada menebak. Satu error pada widget lain dapat menghentikan JavaScript sebelum script komentar sempat selesai. Karena itu periksa seluruh error halaman, bukan hanya function bernama comment.

Error addComment pada Sistem Komentar Lama

Pada comment hack lama kita juga dapat menemukan error seperti:

BROWSER CONSOLE

Cannot read properties of null (reading 'addComment')

Biasanya fungsi lama mencoba membaca:

Msgs.addComment

Jika object Msgs tidak ada, berikan fallback.

Msgs = Msgs || {}; var addText = Msgs.addComment || "Tambahkan Komentar";

Jangan memperbaiki masalah data dengan sekadar memindahkan tombol. Error ini berasal dari state JavaScript, bukan posisi visual tombol.

Memahami Struktur DOM Runtime Blogger

Ketika threaded comment berhasil dirender, struktur DOM aktual jauh lebih penting daripada markup template sebelum render. Pada salah satu pengujian nyata, struktur parent dan reply terlihat seperti berikut:

DIV #comment-holder

DIV .comment-thread.toplevel-thread

LI .comment

DIV .comment-replies

DIV .comment-thread.inline-thread

SPAN .thread-toggle

OL .thread-chrome

Perhatikan bahwa .thread-toggle dan ol.thread-chrome berada dalam .comment-thread.inline-thread. Posisi ini menjadi sangat penting saat kita membuat custom tombol Balasan.

Cara Memeriksa DOM dengan Console

Gunakan Console browser untuk melihat elemen yang benar-benar dibuat Blogger.

document .querySelectorAll( "#blogger_cm li.comment" ) .forEach(function(li, i){ console.log( "COMMENT", i + 1, li.id ); console.log( "REPLY", li.querySelectorAll( "a.comment-reply" ) ); console.log( "TOGGLE", li.querySelectorAll( ".thread-toggle" ) ); console.log( "REPLIES", li.querySelector( ".comment-replies" ) ); });

Periksa runtime, bukan asumsi. Banyak template membuat markup berbeda setelah JavaScript Blogger selesai dijalankan. Selector yang terlihat benar di Edit HTML belum tentu cocok dengan hasil render browser.

Reply Berhasil tetapi Nested Tetap Flat

Ini salah satu kasus yang paling membingungkan. Tombol Balas bekerja, komentar terkirim sebagai reply, tetapi beberapa level selanjutnya terlihat berada pada indent yang sama.

Jangan langsung menganggap CSS salah. Blogger dapat merender beberapa reply lanjutan sebagai sibling di dalam inline-thread yang sama. Karena itu nested visual native Blogger tidak selalu identik dengan jumlah hubungan percakapan yang kita bayangkan.

YANG CSS BISA LAKUKAN Mengubah indent, garis, avatar, warna dan hierarchy visual.

YANG CSS TIDAK BISA Menciptakan parent-child relationship baru yang tidak dibuat renderer.

Jika kebutuhan benar-benar memerlukan renderer bertingkat tanpa batas, Blogger menyediakan informasi parent seperti inReplyTo pada data komentar. Namun ketika kita menggunakan data tersebut untuk membangun tree sendiri, kita sudah masuk ke wilayah custom renderer dan harus menangani lebih banyak fungsi sendiri.

Memahami maxThreadDepth

Pada beberapa template lama kita dapat menemukan setting:

Config.maxThreadDepth = 2;

atau konfigurasi native:

config.maxThreadDepth

Menaikkan angka ini tidak selalu berarti browser akan membuat DOM nested empat atau lima tingkat. Renderer Blogger dapat melakukan normalisasi visual sendiri.

Jangan samakan depth data dengan jumlah margin. CSS nested level 3 tidak akan aktif jika renderer tidak menghasilkan tiga lapis .comment-replies.

Tombol Balas dan Hapus Berpindah ke Segmen yang Salah

Pada nested DOM, parent li.comment dapat mengandung banyak child li.comment. Karena itu selector berikut terlihat sederhana tetapi berbahaya:

var reply = li.querySelector( "a.comment-reply" );

Selector tersebut dapat mengambil tombol dari nested child. Solusinya adalah memastikan elemen tersebut dimiliki oleh li.comment yang sedang diproses.

function ownElements( li, selector ){ var all = li.querySelectorAll( selector ); var result = []; for( var i = 0; i < all.length; i++ ){ var owner = all[i].closest( "li.comment" ); if(owner === li){ result.push( all[i] ); } } return result; }

Kemudian tombol Balas:

var reply = ownElements( li, "a.comment-reply" )[0];

Teknik yang sama dapat digunakan untuk tombol Hapus dan action lainnya.

Membuat Action Bar Balas, Hapus dan Balasan

Setelah setiap tombol dipastikan mempunyai owner yang benar, action dapat ditampilkan dalam satu baris agar interface lebih mudah dipahami.

.cfCommentActions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:9px; }

Namun khusus tombol Balasan, jangan buru-buru memindahkan elemen native .thread-toggle ke action bar. Ada alasan teknis penting yang akan dibahas pada bagian berikut.

Jangan Memindahkan thread-toggle Native

Pada hasil render Blogger, toggle dan daftar reply mempunyai hubungan struktur:

.comment-thread .thread-toggle ol.thread-chrome

Jika .thread-toggle dipindahkan ke dalam comment-block hanya untuk menyatukannya dengan Balas dan Hapus, fungsi native collapse dapat kehilangan konteks struktur yang dibutuhkan.

JANGAN Pindahkan .thread-toggle native keluar dari .comment-thread.

LEBIH AMAN Pertahankan toggle native dan buat tombol visual proxy.

Membuat Tombol Balasan Proxy

Toggle asli dapat tetap berada pada struktur Blogger dan hanya disembunyikan secara visual.

.cfNativeToggleHidden{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; }

Kemudian action bar menggunakan tombol visual:

var button = document.createElement( "button" ); button.type = "button"; button.className = "cfRepliesButton"; button.innerHTML = '<i class="fa fa-comments">' + '</i> Balasan';

Tombol proxy meneruskan aksi ke anchor native di dalam toggle.

button.addEventListener( "click", function(){ var nativeLink = nativeToggle .querySelector("a"); if(nativeLink){ nativeLink.click(); } } );

Dengan metode tersebut UI dapat diatur bebas sementara struktur engine Blogger tidak dipindahkan.

Kenapa thread-collapsed Tidak Menutup Reply?

Ini merupakan kasus yang mudah disalahartikan sebagai error tombol. Saat Balasan diklik, class native ternyata sudah berubah dari:

EXPANDED thread-toggle thread-expanded

menjadi:

COLLAPSED thread-toggle thread-collapsed

Namun daftar balasan masih terlihat. Ini berarti event JavaScript sebenarnya berhasil. Masalahnya berada pada CSS.

.comment-replies ol{ display:block!important; }

Rule tersebut memaksa reply tetap visible walaupun Blogger sudah mengubah state menjadi collapsed.

CSS Collapse dan Expand yang Lebih Aman

Biarkan state native Blogger menentukan visibility ol.thread-chrome.

#blogger_cm .comment-replies .comment-thread > .thread-toggle.thread-collapsed ~ ol{ display:none!important; visibility:hidden!important; height:0!important; max-height:0!important; overflow:hidden!important; opacity:0!important; }

Untuk expanded:

#blogger_cm .comment-replies .comment-thread > .thread-toggle.thread-expanded ~ ol{ display:block!important; visibility:visible!important; height:auto!important; max-height:none!important; overflow:visible!important; opacity:1!important; }

Debug state sebelum debug event. Jika class berubah ketika tombol diklik, event bekerja. Cari masalah di CSS. Jika class tidak pernah berubah, barulah periksa event atau posisi toggle.

Membuat Tombol Balas Fokus ke Comment Editor

Pada beberapa template tombol Balas sudah bekerja tetapi pengguna merasa tombol tidak merespons karena editor berpindah jauh dari posisi tombol. Kita tidak perlu mengganti mekanisme Reply. Cukup berikan feedback berupa smooth scroll.

document.addEventListener( "click", function(e){ var reply = e.target.closest( "a.comment-reply" ); if(!reply){ return; } setTimeout( function(){ var editor = document .getElementById( "comment-editor" ); if(editor){ editor.scrollIntoView({ behavior:"smooth", block:"center" }); } }, 150 ); } );

Script tersebut hanya membantu navigasi. Parent ID dan submit tetap dikelola Blogger.

comment-replybox-thread dan comment-replybox-single

Saat melakukan debugging kita juga perlu mengenali dua container replybox yang dapat digunakan oleh Blogger.

.comment-replybox-thread Area editor komentar pada thread utama.

.comment-replybox-single Area editor ketika membalas komentar tertentu.

Keduanya dapat menggunakan editor yang sama:

#comment-editor

Jangan clone #comment-editor. ID harus tetap unik dan iframe komentar sebaiknya tetap dikelola oleh Blogger.

Memperbaiki Emoticon tanpa Menambah Patch

Plugin emoticon sering dibuat untuk muncul tepat di atas #comment-editor. Masalahnya, editor dapat berpindah ketika pengguna membalas komentar. Solusi pertama yang sering terpikir adalah membuat MutationObserver untuk terus mencari editor.

Pendekatan tersebut tidak selalu diperlukan. Jika engine emoticon sudah mempunyai setting target seperti:

putEmoAbove || "#blogger_cm #comment-editor"

ubah dari sumbernya:

putEmoAbove || "#blogger_cm #top-ce, " + "#blogger_cm #comment-editor"

Dengan begitu #top-ce menjadi lokasi prioritas dan #comment-editor tetap menjadi fallback. Tidak perlu menambahkan observer atau script pemindah baru.

Edit source behavior, bukan menumpuk patch. Jika fungsi asli sudah menyediakan target, ubah target tersebut. Patch baru sebaiknya menjadi pilihan terakhir.

Membuat Tampilan Threaded Comment Model Timeline

Setelah fungsi native sehat, barulah tampilan dapat dibuat lebih dinamis. Timeline cocok digunakan karena avatar dapat menjadi titik percakapan dan garis vertikal menunjukkan hubungan antar komentar.

Pengunjung 10 Agustus 2026

Bagaimana cara memperbaiki threaded comment?

Balas Hapus Balasan

CodeFlare 13 Agustus 2026

Periksa native engine terlebih dahulu, baru custom tampilannya.

Balas Hapus

CSS Dasar Timeline Comment

#blogger_cm .comment-thread li.comment{ position:relative; padding-left:58px; margin-bottom:18px; }

Avatar:

#blogger_cm .avatar-image-container{ position:absolute!important; left:0!important; top:0!important; width:42px!important; height:42px!important; border-radius:50%!important; overflow:hidden!important; } #blogger_cm .avatar-image-container img{ width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important; }

Timeline:

#blogger_cm .comment-thread > ol > li.comment:before{ content:""; position:absolute; left:21px; top:42px; bottom:-18px; width:1px; background: rgba( 0, 131, 218, .35 ); }

Mengatasi Garis Timeline Ganda

Template lama sering sudah mempunyai pseudo-element pada comment, replies atau action. Ketika timeline baru ditambahkan, garis lama masih ikut dirender dan hasilnya terlihat ganda.

.comment:before .comment:after .comment-replies:before .comment-replies:after .comment-actions:before .comment-actions:after

Reset hanya elemen yang memang sudah tidak diperlukan.

#blogger_cm .cfCommentActions:before, #blogger_cm .cfCommentActions:after{ content:none!important; display:none!important; }

Satu sumber garis. Gunakan satu pseudo-element untuk timeline utama. Hindari membuat connector dari comment, reply dan action sekaligus.

Membuat Avatar Benar-Benar Bulat

Avatar oval biasanya terjadi karena width dan height tidak konsisten atau image masih menggunakan ukuran bawaan template.

#blogger_cm .avatar-image-container{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; max-width:42px!important; max-height:42px!important; border-radius:50%!important; overflow:hidden!important; } #blogger_cm .avatar-image-container img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important; }

Responsive Nested Comment pada Mobile

Nested comment yang terlihat menarik di desktop dapat menjadi terlalu sempit pada smartphone. Kurangi jarak indent dan ukuran avatar pada layar kecil.

@media screen and (max-width:600px){ #blogger_cm .comment-thread li.comment{ padding-left:48px; } #blogger_cm .comment-replies{ margin-left:12px; } #blogger_cm .avatar-image-container{ width:36px!important; height:36px!important; } }

Masalah Login Google tetapi Tidak Bisa Berkomentar

Tidak semua masalah komentar berasal dari template. Blogger menggunakan cookie lintas situs untuk mengenali Google Account pada halaman blog. Browser dengan privacy protection ketat, third-party cookies yang diblokir, cross-site tracking, atau extension tertentu dapat membuat pengguna terus diminta login.

CASE 02

Gejala Sudah login Google tetapi form terus meminta Sign in with Google.

Periksa Third-party cookies, cross-site tracking, privacy protection dan extension browser.

Kesimpulan Jangan membongkar threaded_comment_js jika form Blogger sebenarnya sudah dirender.

Jangan Gunakan Revert Widget sebagai Langkah Pertama

Tutorial Blogger lama sering menyarankan Revert widget templates to default. Metode tersebut memang dapat mengembalikan markup komentar Blogger yang hilang, tetapi risikonya cukup besar pada template yang sudah banyak dimodifikasi.

REVERT WIDGET

Custom Widget Reset

Modifikasi Bisa Hilang

Lebih aman membuat backup, membandingkan Blog1 default dengan Blog1 custom, lalu mengambil includable komentar yang dibutuhkan.

Jangan Langsung Mengganti threaded_comment_js

Mengganti keseluruhan includable threaded_comment_js memang pernah menjadi solusi populer. Namun pada template yang masalahnya hanya berasal dari CSS atau Site Feed, tindakan tersebut terlalu agresif.

01 Setting Blogger

02 Comment Feed

03 Console Error

04 comment_picker

05 DOM Runtime

06 CSS Visibility

07 Action Buttons

08 Timeline UI

Troubleshooting Berdasarkan Gejala

GEJALA PERIKSA KEMUNGKINAN MASALAH

Reply hilang Comment Location Embedded belum aktif

Reply menuju form paling bawah Per-post Comment Feed Threaded renderer tidak aktif

Balas tidak melakukan apa-apa Console + Blogger JS Dependency atau event hilang

Nested tetap flat inline-thread Renderer / batas depth

Toggle berubah tetapi reply tetap tampil Computed CSS display:block!important

Toggle tidak berubah state Posisi .thread-toggle Elemen dipindahkan / event rusak

Balas/Hapus pindah segmen closest(li.comment) Selector mengambil nested child

Login Google looping Cookies dan privacy Masalah browser

Emoticon salah posisi Target plugin Jangan tambah observer baru

Urutan Repair yang Paling Aman

1 Native Setting

2 Comment Feed

3 Renderer

4 Console

5 DOM Thread

6 Reply Action

7 Thread Toggle

8 Editor

9 Timeline UI

Urutan ini membuat proses debugging lebih mudah dilacak. Jika tahap ketiga belum sehat, jangan menghabiskan waktu membuat timeline pada tahap kesembilan.

Checklist Setelah Threaded Comment Diperbaiki

Comment Location menggunakan Embedded / Disematkan.

Per-post comment feed tidak dimatikan pada mode Custom.

comment_picker dapat memanggil threaded_comments.

Console tidak mempunyai error yang menghentikan script komentar.

#comment-holder dan inline-thread berhasil dirender.

Tombol Balas menjalankan Reply milik Blogger.

Hapus tetap berada pada segmen komentar pemiliknya.

.thread-toggle tidak dipindahkan dari struktur native.

thread-collapsed benar-benar menyembunyikan reply.

thread-expanded menampilkan reply kembali.

#comment-editor tetap unik dan dikelola Blogger.

Plugin emoticon tidak menjalankan observer tanpa henti.

Avatar tetap bulat pada desktop dan mobile.

Timeline hanya mempunyai satu sumber garis.

Prinsip Penting Saat Memodifikasi Komentar Blogger

01 Jangan mengganti renderer hanya karena CSS rusak.

02 Jangan membuat clone #comment-editor.

03 Jangan memindahkan .thread-toggle native sembarangan.

04 Jangan menyamakan indent CSS dengan depth komentar.

05 Gunakan closest(li.comment) ketika mencari action nested.

06 Periksa state expanded/collapsed sebelum menyalahkan JavaScript.

07 Edit fungsi sumber jika target plugin sudah tersedia.

08 Tambahkan desain setelah sistem native stabil.

Native Blogger Tetap Menjadi Fondasi

Threaded comment Blogger bukan sekadar kumpulan komentar yang dibuat menjorok ke kanan. Di belakang tampilannya ada routing template, comment feed, JavaScript action, inline-thread, replybox, comment editor, hubungan parent, state expanded/collapsed dan bahkan dependency browser.

Itulah sebabnya satu script perbaikan belum tentu cocok pada semua template. Template yang kehilangan JavaScript Blogger membutuhkan pendekatan berbeda dengan template yang hanya mempunyai CSS display:block!important. Blog yang mematikan per-post comment feed juga membutuhkan solusi berbeda dengan pengguna Safari yang memblokir cross-site tracking.

Pendekatan yang paling aman adalah mempertahankan sebanyak mungkin mekanisme native Blogger. Gunakan renderer threaded jika masih tersedia, biarkan tombol a.comment-reply menangani Reply, pertahankan .thread-toggle pada struktur aslinya, biarkan Blogger mengelola #comment-editor, lalu gunakan CSS dan komponen visual custom untuk membuat komentar terlihat modern.

Setelah fondasinya sehat, kita bebas membuat timeline, avatar bulat, action bar Balas–Hapus–Balasan, efek hover, smooth focus, emoticon dan responsive nested comment tanpa membuat sistem komentar semakin rapuh.

CODEFLARE DEBUG PRINCIPLE Repair the Engine. Preserve the Native Logic. Style the Interface. Perbaiki sumber masalah sebelum menambahkan patch baru.