Jump to content

Move "reading time" under blog title

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.almendritasabia.com/blog/la-adiccion-es-una-enfermedad

Hello, I added a reading time to my blog posts, thanks to this article I saw online: https://www.maryphilip.com/the-blog/how-to-add-a-reading-time-to-your-squarespace-blog

I don't want to have to add a code block to each single post. So I followed the following instructions:

1. To add to all blogs, go to the Blog’s Page Settings, click Post Blog Item Code Injection and add the following:

Copy Code
<div class="reading-time"></div>

2. Go to Settings > Advanced > Code Injection and paste the following into the Header:

Copy Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(function () {

    var txt = $("article")[0].textContent,

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

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

    var readingTimeAsString = readingTimeInMinutes + " min";

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

});

</script>

3. Change the design to your liking. Go to Design, click Custom CSS, and paste the following:

Copy Code
.reading-time {
  text-align: center;
  font-size: 18px;
  font-family: 'Playfair Display'
}

To add text before the time count, adapt the content with this CSS to your liking:

Copy Code
.reading-time:before {
  content: 'Reading Time:';
  margin-right: 3px;
}

(I changed a little of the CSS)

 

So it appears at the bottom. 

1004091051_ScreenShot2021-11-06at11_10_09AM.thumb.png.b9455fc41474596e6edbc4388b52dba2.png

 

And I was wondering if it's possible to move it under the blog title?

1291559158_ScreenShot2021-11-06at11_10_40AM.thumb.png.415ebf4f3e217d94b7b101f5566498b4.png

TThank you! 🙂

 

Link to comment
  • Solution
9 hours ago, Karenlara said:

Site URL: https://www.almendritasabia.com/blog/la-adiccion-es-una-enfermedad

Hello, I added a reading time to my blog posts, thanks to this article I saw online: https://www.maryphilip.com/the-blog/how-to-add-a-reading-time-to-your-squarespace-blog

I don't want to have to add a code block to each single post. So I followed the following instructions:

1. To add to all blogs, go to the Blog’s Page Settings, click Post Blog Item Code Injection and add the following:

Copy Code
<div class="reading-time"></div>

2. Go to Settings > Advanced > Code Injection and paste the following into the Header:

Copy Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(function () {

    var txt = $("article")[0].textContent,

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

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

    var readingTimeAsString = readingTimeInMinutes + " min";

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

});

</script>

3. Change the design to your liking. Go to Design, click Custom CSS, and paste the following:

Copy Code
.reading-time {
  text-align: center;
  font-size: 18px;
  font-family: 'Playfair Display'
}

To add text before the time count, adapt the content with this CSS to your liking:

Copy Code
.reading-time:before {
  content: 'Reading Time:';
  margin-right: 3px;
}

(I changed a little of the CSS)

 

So it appears at the bottom. 

1004091051_ScreenShot2021-11-06at11_10_09AM.thumb.png.b9455fc41474596e6edbc4388b52dba2.png

 

And I was wondering if it's possible to move it under the blog title?

1291559158_ScreenShot2021-11-06at11_10_40AM.thumb.png.415ebf4f3e217d94b7b101f5566498b4.png

TThank you! 🙂

 

You can add to Home > Settings > Advanced > Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

  $(function () {

    var txt = $("article")[0].textContent,

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

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

    var readingTimeAsString = readingTimeInMinutes + " min";

    $('article .reading-time').appendTo('article .blog-item-title');
    
    $('article .reading-time').html(readingTimeAsString);


  });

</script>

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.3c59243e50310e2abd003900b9ed6626.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
  • 2 months later...
6 hours ago, recoveringlazyholic said:

@bangank36 I also used the same code provided by Mary Philip. I'm using Brine and the read time appears at the top of each blog post (above the category and title - not desired but I can live with it) but ALSO above each post in the main gallery blog home page. Do you know how to hide the read time from the gallery view?

Can you share the link to this page so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 3/7/2022 at 5:23 AM, recoveringlazyholic said:

@bangank36 sure! you'll see there is "1 minute" above each image, which I assume is the estimated time based on the excerpt. https://www.recoveringlazyholic.com/blog

Add to Design > Custom CSS

/* hide reading time from list view */
body.view-list .reading-time {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Hi everyone - I've just followed these same steps but something isn't working right.

I can see the 'reading time' in the footer of the front page (see attached image) - can someone tell me why this would be happening?

The site is: www.eventplanningtemplates.co


thanks!
Rachella

 

 

Screen Shot 2022-04-26 at 10.05.01 am.png

Link to comment
On 4/26/2022 at 7:08 AM, rachella said:

Hi everyone - I've just followed these same steps but something isn't working right.

I can see the 'reading time' in the footer of the front page (see attached image) - can someone tell me why this would be happening?

The site is: www.eventplanningtemplates.co


thanks!
Rachella

 

 

Screen Shot 2022-04-26 at 10.05.01 am.png

You added this code to Code Injection

<div class="reading-time"></div>

I think you should add it to Blog Page Page Header

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/27/2022 at 5:57 PM, tuanphan said:

You added this code to Code Injection

<div class="reading-time"></div>

I think you should add it to Blog Page Page Header

Thanks for responding.

It still isn't working.

If I take the code out of the Code Injection (Footer) and place it in the BlogPage Header Code Injection  - it shows at the top of the page - see image - and it doesn't show on the blog. If I put the code in Post Blog Item Code Injection then it disappears completely.

I am using Brine template and the instructions were to put this in the general Code Injection.

 

<!-- Start of Blog Post Reading Time ---------------->
<div class="reading-time"></div>
<script>
$( ".reading-time" ).insertBefore ( "h1.BlogItem-title" );
</script>
<!-- End of Blog Post Reading Time ----------------> 

 

Screen Shot 2022-05-03 at 2.23.22 pm.png

Link to comment
  • 11 months later...
  • 4 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.