Guide on How to Make Automatic Read Time on Blogspot

Teuku.net - Displaying estimated reading time on Blogspot automatically can be done easily using JavaScript. This widget can more or less give readers an idea of how much estimated time it will take to read the article.

The reading time widget on Blogspot becomes a kind of hypnosis to make readers last a little longer while reading a blog article.

That's roughly the function of reading time. The goal, of course, is to reduce points (percentage) to the blog's bounce rate. In this case, the read time widget can be another additional applied technique in developing a user-friendly blog.

{getToc} $title={Table of Contents}

Adding Estimated Post Reading Time in blogger

The easiest way to add estimated post reading time is by using some jquery plugin, javascript and html. It help you show the reading time on your blogger blog.

Add JQuery file to Blogger 

Most of you might have this file installed in your blogger template. If not, go to Theme » Edit HTML » Search for </head> and add this following piece of code just above it. Do not forget to backup your template.

<script type='text/javascript'>

//<![CDATA[

if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js\"></scr" + "ipt>");}

//]]>

</script>{codeBox}

Note: You must have implement jquery plugin if your blog dont have it.{alertInfo}

Adding Javascript Code

Once you're done adding file, next step is very simple. We will add a javascript that displays estimated post reading time. Search for </body> and paste the following javascript code above it. 

<script type='text/javascript'>

//<![CDATA[

// Estimated Reading Time

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.getElementById('post-body')); var count = words.split(' ').length; var avg = 200; var counted = count / avg; var maincount = Math.round(counted); document.getElementById('rdTime').innerHTML = maincount + ' min read';

//]]>

</script>{codeBox}

Finding proper position to call the function that displays post reading time 

Now we need to locate where to show the reading time. In most cases, adding reading time feature just below the post title fits perfectly. Again, the location depends on your template. In my case, I added it just below <b:include cond='data:allBylineItems.timestamp' data='post' name='postTimestamp'/> 

<i><span class='pRd pIn info'><bdi id='rdTime'/></span></i>{codeBox}

Customizing the reading time display

The function call displays a plain text with reading time. You can customize it to increase users' attention. Search for ]]></b:skin> and paste following css code just above it. 

#pRd{font-weight:bold;color:#FF0000;}{codeBox}

Now Save your template. Done! I hope you can display estimated article reading time in your blogspot now.

How to calculate reading time?

According to the Free Reading Test, adults read about 200-300 words per minute(WPM). To get an estimated reading time for the blog post, we need to first find out the number of words in our blog post. Then divide that number by the WPM we set for our website users.