How to Add Automatic Reading Time in Blogger - KodeRian

Have you ever wondered how some blogs show an estimated “3 min read” or “5 min read” under their post titles? That small piece of information might look simple, but it plays a big role in user experience. In this article, you’ll learn how to display automatic reading time in your Blogger posts using JavaScript — a lightweight and SEO-friendly way to make your blog look more professional.

By the end of this guide, you’ll not only understand how to add this widget but also how to style it with CSS, troubleshoot common issues, and customize it to perfectly fit your Blogger template.

Why Add a Reading Time Widget?

Modern readers appreciate transparency. When they see how long an article will take to read, it helps them decide whether to continue or bookmark it for later. A reading time widget:

• Increases user engagement by setting expectations early.
• Encourages readers to stay longer on your page, reducing bounce rate.
• Makes your blog look more professional and user-focused.
• Can even help improve SEO indirectly through better user metrics.

For example, when a reader knows that an article will only take about “4 min read,” they’re more likely to continue — especially if they’re browsing quickly from their phone.

Understanding How It Works

The concept is simple: JavaScript counts the total number of words in your article, divides that number by an average reading speed (usually 180–200 words per minute), and then displays the result as an estimated time. This estimation is typically accurate enough for blog posts and tutorials.

In Blogger, you can insert this feature inside your <b:includable id='postBody'> section so that it automatically calculates and displays for every post.

Step-by-Step: Adding Reading Time in Blogger

Step 1: Identify the Post Body Structure

First, find where your blog post content is rendered. Usually, it’s located inside the following section of your Blogger theme:

<b:includable id='postBody' var='post'> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> <data:post.body/> </div> </b:includable> 

Notice the class name .post-body. We’ll use this selector in our JavaScript later to calculate the text content of the article. If your theme uses a different structure, adjust the class name accordingly.

Step 2: Insert the JavaScript Code

Now, add this JavaScript snippet before the closing </body> tag or inside your theme’s HTML section:

<script> /* <![CDATA[ */ function get_text(el) { let ret = ""; let length = el.childNodes.length; for (let i = 0; i < length; i++) { let node = el.childNodes[i]; if (node.nodeType != 8) { ret += node.nodeType != 1 ? node.nodeValue : get_text(node); } } return ret; } let words = get_text(document.querySelector('.post-body')); let count = words.split(' ').length; let avg = 185; // average words per minute let counted = count / avg; let maincount = Math.round(counted); document.querySelector(".readTime").innerHTML = maincount + " min read"; /* ]]> */ </script>

Explanation:

• .post-body — The container that holds your article text.
• avg = 185 — Average reading speed in words per minute (you can adjust this).
• .readTime — The target element where the result will be displayed.

If your template uses different classes, make sure to change .post-body to match the structure of your theme.

Step 3: Display the Reading Time Widget

Next, decide where you want the widget to appear — usually near the post date or author name. Add one of the following snippets to your <b:includable id='postHeader'> section.

<div class='readingTime'> <div class='readTime'></div> </div>

Or, if you only want it to appear on the post page (not homepage or labels), use this conditional code:

<b:if cond='data:view.isPost'> <span class='readingTime'> <span class='separatorReadtime'>&#183;</span> <span class='readTime' id='readTime'></span> </span> </b:if>

Step 4: Add Custom CSS

Finally, style your widget with a few lines of CSS. Add this to your theme’s <style> section or custom CSS box:

.readingTime { display: inline-block; padding: 0; margin: 0 0 0 1rem; } .readingTime span { display: inline-block; float: left; } .separatorReadtime { font-size: 30px; display: inline-block; padding: 0 .35rem; } 

Feel free to modify the font size, color, or padding to match your blog’s style. For example, you can use your brand color for the separator dot or bold the reading time for emphasis.

Troubleshooting: Reading Time Not Showing?

If your reading time widget doesn’t appear or shows nothing, don’t worry. Here are the most common causes:

• Incorrect Selector: Make sure the .post-body class in your JavaScript matches your theme’s structure.
• Nested Elements: If your <data:post.body/> is wrapped inside multiple divs, JavaScript might not detect it. Adjust your query selector accordingly.
• Placement Error: Ensure your script is placed after the HTML structure has fully loaded — preferably before </body>.
• Cache Delay: Clear your browser cache or use incognito mode to test updates properly.

With these checks, you should be able to fix most cases where the reading time widget fails to display.

Advanced Tips & Customization

1. Use Icons or Emojis

Make your reading time stand out with an icon:

<span class='readingTime'> <i class='far fa-clock'></i> <span class='readTime'></span> </span> 

This will display a clock icon before the estimated time, giving a more elegant and professional look.

2. Adjust Reading Speed

Different audiences read at different speeds. For highly technical blogs, readers might take longer. You can adjust the average words per minute (WPM) to suit your niche — for example, use 150 WPM for dense tutorials or 200 WPM for lifestyle articles.

3. Combine with Word Count Display

You can also show both the reading time and word count for added transparency:

document.querySelector(".readTime").innerHTML = maincount + " min read • " + count + " words"; 

This small addition gives your readers an even clearer idea of the article length.

Frequently Asked Questions (FAQ)

1. Does this affect page loading speed?

No, the JavaScript code is lightweight and runs after the page loads, so it won’t slow down your blog.

2. Can I use this on static pages?

Yes, as long as the page includes a .post-body section, the widget will work automatically.

3. What if I use AMP (Accelerated Mobile Pages)?

Unfortunately, AMP restricts JavaScript execution. This method won’t work directly in AMP templates.

4. Can I customize the “min read” text?

Absolutely! You can replace it with anything, such as “minutes to read” or your own language translation.

5. Will this work on all Blogger templates?

Yes, but you may need to adjust class selectors depending on your specific theme structure.

Conclusion

Adding an automatic reading time widget to your Blogger posts is one of those small enhancements that can make a big difference in user engagement. It provides transparency, helps manage reader expectations, and subtly encourages them to spend more time on your content — all of which are great for SEO and overall site experience.

With just a few lines of code, you’ve added a feature found on many professional blogs and news sites. Experiment with styles, placement, and wording until it perfectly fits your theme’s personality.

That’s it! 🎉 You’ve successfully added automatic reading time to your Blogger blog. Don’t forget to bookmark this guide and share it with fellow bloggers who want to make their sites more engaging and modern.