You might know about Medium.com? Have you noticed one of its cool feature? - Estimated Post Reading Time! An estimated reading time encourages users to read a blog post instead of carrying away. This time shows user engagement -- how long will it take to finish reading, builds loyalty, and reduces your bounce rate. In this article, we will show you how to easily add and display estimated post reading time in your blogger posts.
Should you add estimated post reading time to blogger?This is a first question that hits the mind when we think of adding post reading time to blogger posts. A simple answer is - Yes. When we start a new blog, our target is to increase audiences who read our posts. However, it is also important to gain trust and increase user interactions in our blog. For that estimated Reading time for blogger posts can play an important role. In a nutshell, reading time feature helps
- To gain trust.
- To reduce bounce rate.
- To increase users engagement.
How to Add Estimated Post Reading Time To Blogger?The concept of estimated post reading time is very simple. Let’s assume that an average person reads 200 words per minute. So, the reading time of a 1400-words article will be the number of words divided by 200 (1400/200), which is 7 minutes. Of course, you don’t have to manually calculate the read time of all your articles. There is a simple jquery plugin that will do this job efficiently.
Step 1: Add JQuery file to BloggerMost 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.
Note: This is a jquery plugin. It is a must to have this file.
Step 2: Adding JQuery Plugin to BloggerOnce you're done adding file, next step is very simple. We will add a script that displays estimated post reading time. Search for
</body>and paste the following code above it.
Source code taken from Github.
Step 3: Finding proper position to call the function that displays post reading timeNow 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
<span id="etawrap" class='eta'/>
Step 4: Customizing the reading time displayThe 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.
Done! That was just copy and paste, right? And I hope you can display estimated post reading time in your blogger posts now. Before saying good bye, I have a quick question : Do you think it will increase users engagement and help in reducing bounce rate? Please let me know your thoughts in the comment section. Happy Blogging !
Here are a few hand-picked tutorials for you to read next: