Script yang dipakai pada halaman post ini untuk menampilkan estimasi waktu membaca artikel ini kepada semua pembaca yang mengunjungi setiap halaman artikel.
Seperti biasa kalau postingan atau artikel ini adalah sebagai backup data supaya tidak lupa ketika akan mendevelope template atau hanya sekedar iseng merubah2 tampilan pada template.
Hal yang disiapkan
<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 Script
- .post-body = class yang akan diestimasikan jumlah karakter hurufnya.
- .readTime = class yang nanti akan dipanggil melalui HTML
- 185 = jumlah karakter huruf (bisa disesuaikan)
<span class='readingTime'>
<span checkelem='11' class='separatorReadtime'>·</span>
<span class='readTime' id='readTime'/>
</span>Jika ingin menambakan icon jam didepannya tinggal tambahkan icon SVG jam atau bisa dengan kode HMTL dari font awesome sebagai berikut
<i class="fa-light fa-alarm-clock"></i> hasil tampilan jamnya :
bisa disimpan sebelum kode ini
<span class='readTime' id='readTime'/>Semoga bermanfaat dan sebagai contoh bisa melihat tampilannya dibawah judul postingan artikel ini.
