Cara Membuat Reading Time dan Words Count di Blogger

Banyak situs sekarang menampilkan perkiraan waktu baca di dekat judul artikel, misalnya "5 menit baca". Keterangan kecil ini membantu pembaca memutuskan apakah artikel bisa dibaca sekarang atau disimpan untuk nanti.

Di tutorial ini kita memasang dua keterangan sekaligus di Blogger: reading time (waktu baca) dan words count (jumlah kata). Keduanya dihitung otomatis dari isi artikel, jadi tidak perlu diisi manual di setiap postingan.

Langkah 1: Pasang kode penghitung

1. Buka Tema, klik tombol panah di samping Sesuaikan, lalu pilih Edit HTML.
2. Cari kode </body> (tekan Ctrl + F di dalam editor).
3. Tempel kode berikut tepat di atasnya, lalu simpan.

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
(function () {
  var WORDS_PER_MINUTE = 200; // average reading speed
  var body = document.querySelector('.post-body');
  if (!body) return;
  var words = body.innerText.trim().split(/\s+/).filter(Boolean).length;
  var minutes = Math.max(1, Math.round(words / WORDS_PER_MINUTE));
  var timeEl = document.getElementById('entry-reading-time');
  var countEl = document.getElementById('entry-words-count');
  if (timeEl) timeEl.textContent = minutes + ' menit baca';
  if (countEl) countEl.textContent = words.toLocaleString('id-ID') + ' kata';
})();
//]]>
</script>
</b:if>

Bagian yang bisa disesuaikan:

Langkah 2: Tampilkan keterangannya

Masih di Edit HTML, cari bagian info artikel (post meta), biasanya di dekat kode tanggal terbit seperti data:post.date. Tempel penanda berikut di sampingnya:

<span id='entry-reading-time'></span>
<span id='entry-words-count'></span>

Cukup pakai salah satu kalau hanya ingin menampilkan waktu baca atau jumlah kata. Di halaman artikel, hasilnya akan tampil seperti ini: 5 menit baca dan 1.024 kata.

Langkah 3: Rapikan tampilan (opsional)

Supaya ada jarak dan titik pemisah di antara keterangan, tambahkan CSS berikut sebelum kode ]]></b:skin>:

#entry-reading-time,
#entry-words-count {
  font-size: 13px;
  opacity: .75;
}
#entry-words-count::before {
  content: "\00b7";
  margin: 0 6px;
}

Kalau keterangannya tidak muncul

• Kelas isi artikel berbeda. Cari kode data:post.body di Edit HTML, lalu lihat kelas pada tag pembungkusnya. Kalau bukan post-body, ganti .post-body di kode dengan kelas tersebut.
• Penanda dipasang di luar artikel. Pastikan <span> berada di dalam bagian artikel, bukan di sidebar.
• Kode tidak tersimpan. Kalau muncul pesan error saat menyimpan tema, pastikan baris //<![CDATA[ dan //]]> ikut tersalin.

Penutup

Sekarang setiap artikel menampilkan waktu baca dan jumlah kata secara otomatis. Atur letak dan gayanya sesuai tema blog Anda.