How to Show Estimated Reading Time in Blogger

When you visit professional blogs or news websites, you may have noticed a small text at the beginning of the post like “5 min read” or “Reading Time: 7 minutes.” This feature helps readers know how long it will take to finish reading the article.

Adding an estimated reading time to your Blogger posts not only improves user experience but also increases engagement because readers know what to expect before they start.

In this guide, I’ll show you step by step how to add reading time to your Blogger website.

Why Show Reading Time in Blogger?

Before jumping into the setup, let’s quickly see why this is useful:

• Better user experience – Readers can decide if they have time to read the post now or save it for later.
• Professional look – It makes your blog look polished, like big media sites.
• Increase engagement – Shorter posts with a quick reading time may get more clicks.

How Does Reading Time Work?

Reading time is usually calculated based on the average reading speed of a person.
Most people read around 200–250 words per minute.

So if your post has 1,000 words, the estimated reading time will be around 5 minutes.

We’ll use a simple JavaScript code to calculate the word count of your blog post and then display the estimated reading time automatically.

Steps to Add Reading Time in Blogger

Follow the video to Know the step by step process of adding the estimated reading time in your Blogger website. Before that I recommend you to take a backup of your Theme code.

CSS Code

You can Paste the CSS Code Before the ]]></b:skin> Tag.

.read-time {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

Javascript

You can Paste the Javascript code before </body> Tag.

 <b:if cond='data:blog.pageType == "item"'>
 <script>
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  var postContent = document.querySelector(&quot;.post-body&quot;);
  var readTimeElement = document.querySelector(&quot;.entry-meta .read-time&quot;);

  if (postContent &amp;&amp; readTimeElement) {
    var text = postContent.innerText || postContent.textContent;
    var wordCount = text.trim().split(/\s+/).length;
    var wordsPerMinute = 200;
    var time = Math.max(1, Math.ceil(wordCount / wordsPerMinute));

    readTimeElement.textContent = time + &quot; min read&quot;;
  }
});
</script>
</b:if>

HTML Code

You can Add the HTML code where you want to display the Estimated Reading Time for your Blog post.

<span class="read-time"></span>

Steps to Add Reading Progress Bar

You can also add a Reading Progress Bar in Blogger by using the following code.

  <style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.K2progress {width: 100%;height: 7px;  z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class='reading-meter'><div class='K2progress'><div class='progress-bar' id='myBar'/></div>  </div>
<script> 
window.onscroll = function() {myFunction()};
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>

Final Words

Adding reading time to your Blogger posts is a small change, but it improves readability and makes your blog look professional. With just a few lines of JavaScript, you can calculate the word count of each post and display how long it will take to read.

Now your readers will know exactly how much time they need before diving into your articles.