As in WordPress, many blogspot users have been looking for ways to add estimated reading time in blogger template. This is because it does not only make the website look good, but also the blog read time calculator helps your readers to know how long it will take them to read a particular article in your blog. This is somehow like the blog post reading time plugin which is available for WordPress users, but only that this one is a Javascript, which makes it easier for Blogspot users to enjoy.
The average article reading time feature was first seen on the latest version of Jagodesain's Fletro Pro Blogger Template, which is the Fletro Pro v5.5. Though this update isn't officially released yet, but we can see from the demo website and it is a great feature. You can also see this feature on our blog, just above the title of each posts.
How To Show Estimated Reading Time In Blogger
We present to you the estimated reading time javascript which we got from github.com/ajaymalik14/. In order to make it work on your blog, please follow the steps below.
- Login to your blogger dashboard and navigate to the Theme.
- Click on the (drop down menu) arrow beside the "CUSTOMIZE" button.
- Click on Edit HTML.
- On the HTML console, search for </body> alternatively, you can scroll to the end of the codes, then you will see the </body> right above </html>.
- Paste the following script right above the </body>.
<b:if cond='data:view.isPost'>
<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.getElementById('post-body')); var count = words.split(' ').length; var avg = 200; var counted = count / avg; var maincount = Math.round(counted); document.getElementById("read-time").innerHTML = maincount + " minutes read"; /*]]>*/</script>
</b:if>- After pasting the script, apply the below code, anywhere you want the reading time to appear.
<span id='read-time'/>