Plugin Durasi Baca Untuk Blogspot

Pernahkah Anda bertanya-tanya berapa perkiraan waktu yang dibutuhkan ketika membaca sebuah artikel? Waktu merupakan harta yang paling berharga bagi kita. Karena nilainya ada makanya sering kita mendengar waktu adalah uang. Karena saking berharganya waktu itu maka kita pun meminta waktu seseorang untuk mendengarkan penawaran yang kita miliki (ATAU membaca artikel yang kita terbitkan).

Beberapa situs publikasi sudah mulai menambahkan fitur durasi membaca untuk pengunjungnya. Salah satu situs yang saya maksudkan itu adalah Medium (https://help.medium.com/hc/en-us/articles/214991667-Read-time). Inilah yang menjadi latar belakang saya mencoba membuat sebuah plugin baru untuk melengkapi tema Linkmagz blogspot dari Mas Sugeng. Fungsi dari plugin simpel, cukup menginformasikan kepada pembaca berapa rata-rata waktu yang mereka butuhkan untuk membaca artikel yang saya terbitkan.

Read time is based on the average reading speed of an adult (roughly 265 WPM). We take the total word count of a post and translate it into minutes, with an adjustment made for images.

Secara eksplisit Medium memberikan rahasia dapurnya kepada kita. Waktu baca yang mereka berikan merupakan rata-rata kecepatan membaca orang dewasa yaitu 265 kata per menit. Jadi kita bisa merumuskan Jumlah kata dalam sebuah artikel dibagi standar rata-rata kecepatan membaca orang dewasa maka kita akan mendapatkan waktu yang dibutuhkan untuk membaca.

Pertanyaannya adalah bagaimana menurunkan konsep tersebut dalam bentuk kode pemograman web?

Perjalanan untuk menemukan sebuah program untuk menampilkan perkiraan waktu yang dibutuhkan untuk membaca sebuah artikel ini cukup panjang bagi saya. Latar pendidikan saya di sastra inggris sedikit banyak membantu dalam melakukan trial and error dalam petualangan baru ini. Berbekal pengetahuan dasar HTML, CSS, dan Javascript yang pernah saya baca di situs HTMLDog, seperti yang Anda lihat saya bisa mendapatkan kode yang pas untuk menampilkan durasi baca sebuah artikel.

1. Identifikasi tipe dari <data:post.body/> yang terdapat di dalam struktur widget Blog1.

   Bagi Anda yang pernah mencoba untuk memodifikasi template blogger yang digunakan saat ini, kode yang saya sebutkan tadi pastinya tidak asing lagi. Kode tersebut merupakan tempat artikel, gambar, video maupun tabel berada.

   Apa tipe dari data:post.body tersebut? Pertanyaan ini terjawab ketika saya menelusuri blogger product expert, Soraya Lambrechts, di link berikut https://bloggercode-blogconnexion.blogspot.com/1971/07/data-posts-body.html. Tipe data dari <data:post.body/> adalah sebuah string.

   Sebuah String biasanya digunakan untuk menangkap data yang ditampilkan dalam bentuk teks (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). Dengan tipe data string yang bisa kita lakukan adalah menghitung berapa total kata yang dipergunakan dalam sebuah artikel yang diterbitkan.

2. Bagaimana mengambil data string dalam <data:post.body/>

   Menurut situs w3schools.com (https://www.w3schools.com/js/js_htmldom_document.asp) ada tiga cara atau metode untuk mengambil string dalam <data:post.body/>. Ada tiga metode yang paling sering dilakukan

   • document.getElementById(id)
   • document.getElementsByTagName(name)
   • document.getElementsByClassName(name)

   Ketiga metode tersebut sudah saya gunakan dan memang bisa menarik data string dalam <data:post.body/>.

3. Menghitung berapa jumlah kata dalam sebuah laman artikel.

   Dalam bahasa pemograman javascript, menghitung string bisa dilakukan dengan menggunakan perintah .length(). Sayangnya hasil dari perintah tersebut tidak menunjukkan jumlah kata dalam artikel tetapi jumlah karakter yang terdapat didalam sebuah string. Lalu bagaimana kita akan mengetahui total kata yang digunakan dalam artikel?

   Pertanyaan saya ini ternyata sudah ditanyakan oleh seseorang pada situs stackoverlow (https://stackoverflow.com/a/58789732). Di situs tersebut saya pun mendapatkan jawabannya. Ada beberapa cara yang bisa digunakan untuk mendapatkan total jumlah kata dalam sebuah string. Pilihlah yang menurut Anda lebih sesuai dengan kebutuhan (DAN kemampuan).

4. Mengkonversi Jumlah Kata Menjadi Durasi dalam Menit

   Setelah mendapatkan jumlah kata dalam artikel langkah selanjutnya adalah mengkonversi jumlah kata dalam artikel menjadi waktu baca. Dalam artikel yang diterbitkan oleh bbc (https://www.bbc.com/indonesia/vert-cap-41466928), rata-rata waktu yang dibutuhkan untuk membaca dalam satu menit adalah 300 kata. Dengan asumsi tersebut maka kita bisa membuat sebuah rumus untuk mengkonversi teks dalam artikel menjadi sebuah perkiraan durasi membaca.

   Pada tahap ini kita harus berhati-hati karena output dari rumus yang dibuat hasilnya harus ANGKA.

5. Menampilkan Durasi Baca untuk pengunjung

   Inilah langkah terakhir yang dilakukan. Kita harus menampilkan durasi baca untuk pengunjung setelah melakukan proses panjang mengambil string dari <data:post.body/> dan mengkonversi teks dalam artikel menjadi waktu.

Temuan dan Pengembangan

Meskipun sudah bisa berjalan untuk tampil dilaman artikel, ternyata ada kekurangan dari kode penampil durasi baca yang telah berjalan saat ini. Kekurangannya yaitu waktu baca tidak tampil ketika pengunjung berada di halaman beranda (dan juga kemungkinan di halaman lain seperti halaman statis, halaman archieve, dan halaman pencarian). Solusi yang saya dapatkan sementara ini adalah menambahkan perintah document.createElement pada pembungkus <div class="post-info">.

Anda punya ide lainnya? Jangan sungkan untuk memberikan saran kepada saya melalui kolom komentar dibawah.

PS: Jika anda butuh bantuan untuk menambahkan fitur durasi baca dalam artikel blog Anda, hubungi saya melalui laman kontak.