Menampilkan Reading Time di Blogger (Script Ringan)

deuxly.id

Dec 22, 2025

4 min read

0 Views

Saat mengunjungi blog profesional atau situs berita, Kamu mungkin sempat merhatiin teks kecil di awal postingan misalnya: 5, 3 reading time atau Waktu Membaca: 7 menit. Fitur ini sangat ngebantu visitor blog buat tau berapa lama waktu yang dibutuhin buat menyelesaikan artikel tersebut.

Nambahin perkiraan waktu baca di postingan Blogger, Kamu ngga cuma ningkatin pengalaman pengguna.

Dalam tutorial ini, deuxly akan bikin tutorial singkat langkah demi langkah cara menambahkan reading time ke blog.

Apa Fungsi Reading Time di Blog?

Sebelum masuk ke tutorial, mari kita liat sekilas kenapa reading time ini berguna:

User Experience (UX): Pembaca bisa mutusin mereka punya waktu buat baca postingan sekarang atau nyimpan untuk nanti.
Tampilan profesional: Ini membuat blog Anda terlihat rapi, seperti situs media besar.
Meningkatkan interaksi: Artikel yang lebih pendek dengan waktu baca yang cepat mungkin bakal dapatin lebih banyak klik.
Bisa Nurunin Bounce Rate: Ya, Fitur Reading Time ini bisa mengurangi bounce rate blog karena ekspektasi pembaca udah diset di awal.

Logika Perhitungan Script

Sebelum kita masuk ke acak-acak script, aku jelasin dikit cara kerjanya biar kamu paham logikanya. Script yang bakal kita pakai nanti bekerja dengan cara yang sangat sederhana:

Script bakal ngambil seluruh teks yang ada di dalam artikel.
Script mulai ngitung jumlah total katanya.
Total kata dibagi dengan kecepatan baca rata-rata manusia kisaran 200 kata per menit.

Jadi rumusnya gini: Total Kata / 200 = Menit Baca. Hasilnya nanti bakal dibulatin ke atas supaya estimasinya lebih pas.

Menyiapkan Kode Javascript

Kita bakal pakai Vanilla JavaScript murni tanpa jQuery atau library aneh-aneh. Tujuannya supaya loading speed blogmu tetap ngebut dan performa di Google PageSpeed Insights tetap hijau.

Salin kode di bawah ini:

<script>
// Script Estimasi Waktu Baca by deuxlydev
function estimateReadingTime() {
  const postBody = document.querySelector('.deuxly-readingtime'); // Perhatikan bagian ini
  const readTimeDisplay = document.getElementById('read-time');

  if (postBody && readTimeDisplay) {
    const text = postBody.innerText;
    const wpm = 200; // Kecepatan baca rata-rata
    const words = text.trim().split(/\s+/).length;
    const time = Math.ceil(words / wpm);
    
    readTimeDisplay.innerText = time + ' Menit Baca';
    readTimeDisplay.style.display = 'inline-block'; // Munculkan jika berhasil hitung
  }
}

window.addEventListener('load', estimateReadingTime);
</script>

Penempatan Kode di Template

Sekarang buka dashboard Blogger, masuk ke menu Template, dan klik tombol panah kecil di sebelah Sesuaikan dan lanjut pilih Edit HTML.

Jangan lupa backup dulu template kamu buat jaga-jaga kalau ada kode yang broken. Kalau udah, klik di dalam area kode, tekan Ctrl + F dan cari kode </body> Tempelin script JS yang udah kamu copy tadi tepat di atas tag </body> itu. Simpan tema.

Memanggil Fitur Reading Time di Bawah Judul Artikel

Script udah terpasang, tapi angkanya belum muncul karena kita belum kasih tempat buat nampilin hasilnya. Biasanya, waktu baca ini letaknya di bawah judul atau pas di sebelah tanggal postingan.

Cari kode <data:post.body/> atau bagian meta post di template bloggermu (setiap template beda-beda, biasanya di sekitar post-header). Lalu, selipin kode pemanggil ini di posisi yang kamu mau:

<span id='read-time' style='display:none;'>Menghitung...</span>

Styling Tampilan Reading Time Pakai CSS

Biar tampilannya ngga kaku dan lebih bersih, kita perlu kasih sentuhan CSS dikit. Kamu bisa letakkin kode ini di bagian <b:skin> atau di antara tag <style>:

#read-time {
  font-size: 14px;
  color: #888;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  margin-left: 10px; /* Sesuaikan jarak */
}

/* Menambahkan ikon jam kecil sebelum teks */
#read-time:before {
  content: '\23F1'; /* Kode ikon jam unicode */
  margin-right: 5px;
  font-size: 16px;
}

Masalah Kalau Reading Time Tidak Muncul

Udah pasang semua tapi kok ngga muncul? Masalah paling klasik biasanya ada di penamaan Class.

Di script tadi, aku pakai selector .deuxly-readingtime. Nah, di beberapa template kustom mungkin aja pakai nama class yang beda buat ngebungkus konten artikelnya, misalnya .entry-content, .article-body, atau .post-content, .post-body.

Caranya gampang, buka salah satu artikel kamu, klik kanan di paragraf artikel, pilih Inspect Element, dan lihat nama class div pembungkus utamanya. Kalau namanya beda, tinggal ganti .post-body di script JS tadi dengan nama class yang ada di templatemu.

Gampang kan? Sekarang blog Blogger kamu udah punya fitur canggih ala Medium atau situs berita besar. Selain bikin tampilan blog jadi lebih profesional, fitur ini ngebantu buat pembaca setia blogmu.

Selamat mencoba, dan kalau masih bingung soal nempatin kodenya, tulis aja di komentar nanti aku bantuin!

Deuxly