Cara Pasang Widget Read Time Tanpa jQuery

"Cara mudah Pasang Widget indikator Read Time estimasi waktu membaca artikel di bawah judul ringan Tanpa jQuery."

YZG 10 Januari

Cara memasang info read time di blogger tanpa jquery, mini widget blogger reading time sepertinya tengah popular diterapkan pada beberapa template blogger popular belakangan ini, mulai dari template lokal maupun luar luar tak jarang kita temukan.

Posisi penempatan widget ini biasanya terdapat dibagian awal artikel tepatnya dibawah Judul bersebelahan dengan info waktu tanggal terbitnya artikel yang kita baca.

Menarik Pembaca

Bukan tanpa alasan menempatkan snippet ini selain dapat menunjang estetika juga dapat meningkatkan engagement pembaca lho, dengan mengetahui estimasi waktu baca ini pembaca jadi memiliki gambaran dan memunculkan rasa penasaran dengan isi artikelnya.

Oleh sebab itu widget ini telah diterapkan pada blog, forum dan website besar salah satunya tak lain dan tak bukan adalah Medium. Semenjak kehadiran website user generated content ini cukup menarik banyak developer template yang terinspirasi dengan user interfacenya.

CatatanDroid sendiri telah beberapa kali memasang dan mencabutnya karena alasan widget ini pernah memberatkan skor web dev dikarenakan plugin library jQuery nya.

Widget Waktu Baca tanpa jQuery

Baiklah bagi sobat yang telah jauh-jauh hari telah mencari artikel ini pasti telah menemukan banyak sekali tutorial dan referensi kode di luaran sana, kok CatatanDroid masih saja menuliskannya? padahal sudah banyak yang nulis?

Tak lain dan tak bukan karena CatatanDroid ingin ikut serta mendapatkan pahala berbagi ilmu pada sobat pembaca semua. Aamiin Insya Allah. Selain itu beberapa kode readingtime yang tersebar lebih banyak yang harus memasang kode jQuery sebagai syarat utama agar kode berjalan.

Seperti yang pembaca setia semua ketahui CatatanDroid selama ini membagikan tutorial dan tips blogger yang ramah core web vital bukan? itulah kabar baiknya karena tutorial kali pun tidak memerlukan js library milik jQuery yang cukup memberatkan blog. Sehingga akan sangat ramah core web vital.

Daripada berlama-lama lagi tuk langsung saja kita simak dibawah ini tutorialnya!

Cara Pasang Widget Reading Time di Blogger

Pertama-tama buka Blogger dan login dengan akun kalian
Buka menu Theme dan pilih Edit HTML

Cari /body kemudian tempatkan kode JavaScript berikut ini diatasnya

<script async='async' type='text/javascript'>
/*<![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";
/*]]>*/
</script>

Kemudian tempatkan kode html pemanggil berikut ini di posisi yang sobat inginkan, misal didalam 'post-info'

<b:if cond='data:view.isSingleItem'>
<div class='readingTime'>
<svg aria-hidden="true" height="1rem" preserveAspectRatio="xMidYMid meet" role="img" style="padding: 0 .2rem 0 .3rem;margin: 0 0px -3px 0;" viewBox="0 0 24 24" width="1rem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5c-4.411 0-8 3.589-8 8s3.589 8 8 8s8-3.589 8-8s-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6s6 2.691 6 6s-2.691 6-6 6z" fill="currentColor"></path><path d="M11 9h2v5h-2zM9 2h6v2H9zm10.293 5.707l-2-2l1.414-1.414l2 2z" fill="currentColor"></path></svg><div class='readTime'/>
</div>
</b:if>

Save template dan lihat hasilnya

Penutup dan Kesimpulan

CatatanDroid mendapatkan referensi kode javascript readtime ini dari blog BungFrangki. Bagaimana sobat cukup mudah bukan? Semoga bermanfaat bagi sobat yang mencari tutorial blog cara pasang indikator waktu membaca di artikel blog tanpa jQuery. Terima kasih dan Selamat mencoba!