Cara Membuat Read Time Otomatis di Blogspot atau Blogger

Menampilkan perkiraan waktu membaca (reading time) di Blogspot atau Blogger secara otomatis kita bisa lakukan dengan mudah menggunakan JavaScript. Widget ini kurang lebih dapat memberi gambaran kepada pembaca terhadap berapa banyak estimasi waktu yang dibutuhkan untuk membaca konten tersebut.

Widget reading time Blogspot ini menjadi semacam hipnosis untuk membuat pembaca bertahan sedikit lebih lama saat sedang membaca sebuah konten blog.

Kira-kira begitulah fungsi reading time. Tujuannya, tentu saja fitur ini soal pengurangan poin (persentase) terhadap bounce rate blog. Dalam hal ini, widget read time dapat menjadi teknik terapan tambahan lainnya dalam mengembangkan blog menjadi user-friendly.

Cara Memasang Estimasi Reading Time di Blogger/Blogspot Secara Otomatis

Berikut ini cara menerapkan widget auto Reading Time di Blogspot atau Blogger:

Perhatikan Struktur PostBody

Pertama, silahkan perhatikan terlebih dahulu struktur halaman postingan PostBody (<b:includable id='postBody' var='post'>) di Blogger masing-masing.

Sederhananya, misalkan struktur PostBody template adalah seperti berikut ini:

        <b:includable id='postBody' var='post'>
          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
            <data:post.body/>
          </div>
        </b:includable>

 Yang perlu diperhatikan dari kode di atas adalah bagian <data:post.body/>. Dalam hal ini, kode tersebut hanya dibungkus oleh satu kode tag div, yaitu div class .post-body dan .entry-content.

Nah, selanjutnya salah satu tag div class tersebut akan kita gunaakan pada JavaScript nanti.

Display Estimated Post Reading Time in Blogger/Blogspot Posts Automatically with JavaScript

Dari struktur halaman postingan di atas, maka JavaScriptnya dapat disusun sebagai berikut:

<script>
/*<![CDATA[*/
function get_text(el) {ret = ""; var length = el.childNodes.length; for(var i = 0; i < length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.querySelector('.post-body')); var count = words.split(' ').length; var avg = 185; var counted = count / avg; var maincount = Math.round(counted); document.querySelector(".readTime").innerHTML = maincount + " min read";
/*]]>*/  
</script>

Keterangan:

1. Kode tag .post-body pada script dapat diubah sesuai struktur PostBody pada template masing-masing.
2. Angka 185 merupakan jumlah kata yang diestimasikan dibaca per menit.
3. Kode .readTime merupakan tag pemanggil widget Reading Time.

Jika terlalu khawatir dengan tag Class, sebaiknya pada bagian PostBody (langkah 1) membuat dan mengubahnya ke tag ID. Biar lebih spesifik.

Memanggil Widget Reading Time

Sekarang saatnya menampilkan widget Reading Time. Bagusnya, widget ini diletakkan pada bagian post meta, yaitu sejajar dengan post author, date published dan lainya. Atau dimana saja sesuai kebutuhan.

Adapun kode pemanggilnya menjadi seperti ini:

<div class='readingTime'><div class='readTime'</div></div>

Atau, jika kondisinya hanya ingin menampilkan di halaman postingan, maka kodenya bisa ditulis seperti ini:

<b:if cond='data:view.isPost'><span class='readingTime'><span checkelem='11' class='separatorReadtime'>&#183;</span><span class='readTime' id='readTime'/></span></b:if>

Letakkan kode tersebut di <b:includable id='postHeader' var='post'> jika ingin meletakkanya di bagian post meta.

Mengatur Tampilan Widget Reading Time dengna CSS

Sebelum ke langkah pamungkas, alangkah baiknya terlebih dahulu mengatur tampilan widget Reading Time dengan CSS. Contohnya dengan seperti ini:

.readingTime{display:inline-block;padding:0;margin:0 0 0 1rem}
.readingTime span{display:inline-block;float:left}
.separatorReadtime{font-size:30px;display:inline-block;padding:0 .35rem}

Jika langkah di atas sudah sesuai, silahkan save template.

Widget Reading Time Tidak Tampil?

Bila telah menerapkan langkah-langkah di atas begitu saja dengan tidak cermat, lalu ternyata widget Reading Time tidak tampil alias not working at all? Maka dapat dipastikan 2 hal ini yang menjadi kendalanya.

Kesatu, bahwa kode <data:post.body/> masih dibungkus oleh tag div yang lain. Kedua, tag div pada template Anda berbeda dengan tag div yang membungkus <data:post.body/>, yang mana tag tersebut digunakan pada JavaScipt widget Reading Time.

Dalam hal ini, penting untuk melihat kembali susunan struktur template. Mengingat setiap template html Blogger tersusun dengan kombinasi tag dan kondisi yang berbeda-beda.

Akhir Kata

demikian, sekian dan terima kasih!