Mecha versi 2.6.4 sudah dirilis!

Mengecek Adanya Komentar Balasan pada Komentar Induk di Blogger

Tabel Konten
  1. Cara Mengecek Apakah Komentar Induk Memiliki Komentar Balasan atau Tidak 

Mengingat kembali tentang bagaimana kita membedakan antara komentar induk dengan komentar balasan pada Blogger dapat kita lakukan dengan cara mengecek adanya properti var.inReplyTo pada item komentar yang dimaksud. Properti ini bertugas untuk menyimpan ID komentar induk:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.inReplyTo'>
    <!-- `data:comment` adalah komentar balasan -->
  <b:else/>
    <!-- `data:comment` adalah komentar induk -->
  </b:if>
</b:loop>

Dari sini kita dapat melakukan iterasi ulang di dalam iterasi komentar induk, dan kemudian menyaring anak-anak komentar yang memiliki nilai properti var.inReplyTo (dalam hal ini adalah reply.inReplyTo) yang sama dengan parent.id (dalam hal ini adalah comment.id):

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments' var='reply'>
      <b:if cond='data:reply.inReplyTo == data:comment.id'>
        <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
      </b:if>
    </b:loop>
  </b:if>
</b:loop>

Ekspresi lambda (fungsi anonim) pada Blogger memungkinkan kita untuk melakukan penyaringan komentar-komentar balasan terhadap ID komentar induk dengan cara yang lebih cepat seperti ini, karena penyaringan data komentar dapat dilakukan sebelum proses iterasi dilakukan:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
      <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
    </b:loop>
  </b:if>
</b:loop>

Ada satu metode yang menarik dalam fungsi anonim Blogger yaitu metode count. Metode ini memungkinkan kita untuk menghitung jumlah item yang ada setelah proses bersyarat selesai diterapkan pada koleksi data. Sebagai contoh, kode di bawah ini akan menampilkan jumlah total komentar dengan nama penulis Taufik Nurrohman:

Jumlah komentar dari Taufik Nurrohman: <b:eval expr='data:post.comments count (i => i.author == "Taufik Nurrohman")'/>

Dalam bahasa pemrograman, kita dapat melakukan sesuatu seperti ini untuk menghitung jumlah komentar dari Taufik Nurrohman, yang mana ini tidak akan dapat kita lakukan pada Blogger sebelum adanya fitur fungsi anonim:

let i = 0;
post.comments.forEach(comment => {
    if (comment.author == 'Taufik Nurrohman') {
        ++i;
    }
});

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Metode count pada fungsi anonim akan lebih sesuai jika disamakan dengan metode filter dan properti length pada JavaScript seperti ini:

let i = post.comments.filter(i => i.author == 'Taufik Nurrohman').length;

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Cara Mengecek Apakah Komentar Induk Memiliki Komentar Balasan atau Tidak 

Sebuah komentar dari seorang pembaca bernama Satank Mkr pada artikel Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli kurang lebih menanyakan tentang bagaimana caranya menambahkan elemen pembungkus khusus yang akan melingkupi seluruh komentar balasan, sehingga jika terdapat setidaknya satu buah komentar balasan di bawah komentar induk, maka komentar-komentar balasan tersebut akan dibungkus dengan elemen HTML tertentu. Berikut adalah ilustrasi yang beliau maksudkan:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment"> … </li>
</ul>

Melihat pada contoh di atas, akan sangat mudah untuk menambahkan elemen pembungkus <ul class="comments"> karena Blogger memiliki properti numberOfComments pada data:post yang bertugas untuk menyimpan jumlah keseluruhan komentar yang ada. Akan tetapi, kita tidak memiliki properti khusus untuk menghitung jumlah komentar balasan melalui data:comment, sehingga untuk menentukan apakah sebuah komentar induk memiliki komentar balasan atau tidak akan mustahil tanpa adanya properti khusus; katakanlah var.numReplies seperti ini:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:if cond='data:comment.numReplies > 0'>
          <ul class='comment-replies'>
            <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
              <li class='reply'> … </li>
            </b:loop>
          </ul>
      </b:if>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment">
    …
    <ul class='comment-replies'>
      <li class='reply'> … </li>
      <li class='reply'> … </li>
    </ul>
  </li>
  <li class="comment"> … </li>
</ul>

Metode count datang menyelamatkan! Karena metode ini mampu menghitung jumlah komentar yang ada setelah proses bersyarat diterapkan pada data komentar, maka kita dapat menghitung jumlah komentar balasan terkait dengan komentar induk dengan cara seperti ini:

<b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
  Jumlah komentar balasan: <data:numReplies/>
</b:with>

Untuk menerapkannya sebagai ekspresi kondisional di dalam iterasi komentar, kita bisa menuliskannya seperti ini:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:numReplies > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

Atau seperti ini juga bisa:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='replies' value='data:post.comments filter (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:replies.size > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:replies' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

26 Komentar

budkalon

Selamat malam. Saya ingin bertanya, apakah sudah ada artikel yang cukup bagus mengenai formulir komentar versi 3.0 milik blogger?

Taufik Nurrohman

Pernah Saya coba terapkan pada tema yang tidak standar tapi selalu tampil sebagai halaman kesalahan.

Ampas Leteg

Coba ini bang...

https://gist.github.com/ismis/715bc852e37cfbb2e458998ca4efc7fc

Taufik Nurrohman

Sudah mas. Tinggal menambahkan parameter &skin=soho saja kan? Hasilnya muncul halaman kesalahan kalau di blog Saya.

Thiago Coss

I got a new comments box (v.3.0). I customized the "Soho" theme. Look >> https://thicoss.blogspot.com/2018/07/resenha-alem-da-magia-tahereh-mafi.html

Taufik Nurrohman

Yes. But the problem here is that you can’t apply the new comment form style to your old template away. Putting the default <html> attributes from template V3 to my current template wasn’t enough.

The only person that I know have managed to apply the new comment form style to his old template was Duy Pham.

Maulida Dzul Fikri

Apakah Mas Taufik tau teknik apa yang kira-kira dipakai oleh duy-pham.blogspot.com?

Jika perhatikan, tautan komentar dia hanya bisa menggunakan &skin=soho. Selain itu, misalnya jika kita ganti dengan &skin=contempo, tautan yang berisi formulir komentar dia akan rusak.

Anehnya, jika kita hapus &skin=soho, formulir komentar dia menjadi biasa, yakni sama dengan template versi 2 dan widget versi 1.

Apakah selain berkaitan dengan data:skin, juga berkaitan dengan pengaturan komentar di dalam dasbor Blogger, seperti opsi iframe, pop-up, atau terbuka di tab baru? Blogger memiliki tiga pilihan tersebut dan masing-masing berbeda: jika pop-up dan/atau terbuka di halaman baru, dia gunakan formulir yang tidak sama ketika kita pilih opsi iframe seperti ini.

Meski, ya, seperti yang Mas Taufik bicarakan di blog Ignel.com, formulir komentar teranyar milik Blogger tidak memiliki pratinjau. Namun, jika masalah ini terpecahkan, barangkali menjadi perkembangan bagi pengguna teknologi lama milik Blogger yang ingin menggunakan kebaharuannya. Jika Duy Pham bisa, asumsi teknologi yang terbarulah yang bisa merubah mengikuti yang lama akan patah. Bahwa teknologi lama juga bisa up to date dengan perputaran zaman.

Taufik Nurrohman

Sepertinya masalah di definisi variabel bagian komentar yang harus disertakan sebelum bisa memakai gaya formulir yang baru. Coba tanya mbak Igniel.

Ampas Leteg

Masalahnya bukan hanya pada parameter &skin=soho saja, tapi yang ada di dalam <b:skin> itu di bawa juga tidaknya.

Entah kok bisa gitu...

Ivan Mantovani S

masih aktif aja nih suhu...

Taufik Nurrohman

Kalau ada yang baru pasti aktif lagi.

Padma Aksara Barya

Mas, ada teknik untuk membatasi jumlah karakter dalam textarea komentar Blogger atau tidak? Misalnya dengan Javascript atau tidak?

Dekraken ID

mas tanya dong, saya kan barusan mampir disini

saya ingin menampilkan post based on label di homepage saya menambahkan tag cond seperti ini dan berhasil

...

yang ingin saya tanya, bagaimana cara mengatur jumlah post yang akan tampil ya mas?
makasih sebelumnya

Taufik Nurrohman

Nggak bisa mas, karena fungsi filter hanya akan mengambil data yang sesuai dengan perintah saja, tapi tidak bisa menentukan banyak data yang akan ditampilkan. Kalau jumlah data yang akan disaring ada sebanyak 20 misalnya, maka hasilnya keluarannya pasti akan selalu lebih kecil atau sama dengan 20.

Dekraken ID

terima kasih mas sudah merespon, saya udah menemukan alternatif lain, dan hasilnya memuaskan..

satu lagi dong nanya boleh ya mas, hehe
bagaimana caranya mendapatkan data:post.id / postID disetiap post yang ditampilkan di related posts?

saya udah coba dengan menambahkan kode seperti ini,

blogID = /\:blog-?(\d+)(\.|$)/.exec(entry.id.$t)[1];
postID = entry.id.$t.replace('tag:blogger.com,1999:blog-'+blogID+'.post-','');

hasilnya hanya menampilkan 1 postID yang sama di semua related post.
kurang lebih seperti ini mas tampilannya

Saeful Rahman

Boleh sharing metode seperti apa yang dipake untuk memfilter pos tanpa mengurangi jumlah postingan yang ditentukan. Kebetulan Saya juga membutuhkan untuk template yang sedang saya buat.

Sekedus

pakai length juga bisa gan. ref

Andrie Kristianto

Wahh milik saya malah urutan dari threaded komentarnya tidak beraturan itu kenapa ya mas?, jadi misal ada yang komentar 5 orang dan saya ingin balas komentar nomor 2, posisi komentar baru itu malah dibawah komentar ke 5, jadi bukan antara 2 dan 3 gitu :(

Taufik Nurrohman

Itu biasanya karena masalah pada bagaimana implementasi fungsi JavaScript untuk memindahkan formulir komentar. Uuntuk kasus formulir komentar balasan berada di bawah komentar balasan terakhir mungkin itu karena formulir komentar di-append ke elemen <ul> induk dari item-item komentar balasan dan bukannya di-append ke elemen <li> dari item komentar yang dimaksud:

<ul>
  <li>Komentar 1</li>
  <li>
    Komentar 2
    <ul>
      <li>Komentar 2.1</li>
      <li>Komentar 2.2</li>
      <li>Komentar 2.3</li>
      <li>Komentar 2.4</li>
      <li>Komentar 2.5</li>
      <form>Formulir komentar</form>
    </ul>
  </li>
  <li>Komentar 3</li>
</ul>
<ul>
  <li>Komentar 1</li>
  <li>
    Komentar 2
    <ul>
      <li>Komentar 2.1</li>
      <li>
        Komentar 2.2
        <form>Formulir komentar</form>
      </li>
      <li>Komentar 2.3</li>
      <li>Komentar 2.4</li>
      <li>Komentar 2.5</li>
    </ul>
  </li>
  <li>Komentar 3</li>
</ul>

Andrie Kristianto

Kalau untuk formulir komentarnya aman aman saja, tapi untuk balasan komentarnya itu yang berpindah ke paling bawah.. Saya coba untuk repair reply comments nya menggunakan script gitu hanya memperbaiki tombol balasnya saja, tapi tidak memperbaiki posisi balasannya..

Contohnya begini:

Taufik Nurrohman

Itu normal mas, karena maksimal anak balasannya sudah diset satu tingkat. Ada satu item konfigurasi di JavaScript komentar Blogger yang sampai sekarang belum pernah ada di dokumentasi tapi mungkin bisa dipakai untuk menambah tingkatan anak balasan. Saya sendiri masih penasaran tapi belum sempat nyoba. Namanya maxThreadDepth. Coba ganti nilainya menjadi lebih besar dari 2.

Hack Hermannz

kalau cara mencari atau kondisional anak terakhir dari komentar balasan gimana ya gan ? thx

broindo

mas mau bertanya, gmna y cara nerapin link aktif komentar blogger hanya bisa dilakukan untuk pemilik blog? apa itu bisa?

Taufik Nurrohman

Ada kondisionalnya mas. Lupa Saya. Kalau nggak salah data:comment.author == data:post.author

<b:if cond='data:comment.author == data:post.author'>
  <a expr:href=''><data:comment.author/></a>
<b:else/>
  <data:comment.author/>
</b:if>

Komentar telah ditutup.