Join Our Telegram Group to connect with bigger community. Join Now!

Table of Content

How to add estimated reading time to blogspot posts - Peak Fiction

In this article, I will guide you how to add reading time to articles on Blogger or other platforms such as Wordpress. Showing estimated reading times for articles is a good idea. It gives your blog readers a specific idea of how much time they need to spend reading that article.
How to add estimated reading time to blogspot posts

How to add estimated reading time to blogspot posts?

We will use a simple javascript to do this.
Step 1: Log in to the Blogger admin page > Themes > Edit HTML .
Insert the following code before the </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

    $(function() {

        var txt = $(".post-full-content")[0].textContent;

        var wordCount = txt.replace(/[^\w ]/g, "").split(/\s+/).length;

        var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;

        var readingTimeAsString = readingTimeInMinutes + " reading minutes";

        $('article .reading-time').html(readingTimeAsString);

    });

</script>

Step 2: Add the CSS before ]]></b:skin>.
.reading-time :before { 

  content : 'Reading time:' ; 

  margin-right : 3px ;}

Insert the code below where you want to display the reading time.
<div class="reading-time"></div>

Save the Template and view the results. You can adjust some CSS to suit your blog.
This simple trick will help you easily add estimated reading time to your blogspot posts. Good luck!

Post a Comment