Reading Time Badge

Customize

Appearance

Live Preview

<style>
  .reading-time-badge {
    display: inline-block;
    font-size: 13px;
    color: #555555;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 3px;
    margin: 8px 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1;
  }
</style>

<script>
(function() {
  // Only run on blog post pages
  var article = document.querySelector('.blog-item-wrapper, article.entry');
  if (!article) return;

  // Count words in the post body
  var body = article.querySelector('.body, .entry-content, .sqs-block-content');
  if (!body) return;
  var text = body.innerText || body.textContent || '';
  var words = text.trim().split(/\s+/).filter(function(w) { return w.length > 0; }).length;
  var minutes = Math.max(1, Math.ceil(words / 200));

  // Create badge element
  var badge = document.createElement('div');
  badge.className = 'reading-time-badge';
  badge.innerHTML = '{time} min read'.replace('{time}', minutes);

  // Insert into page
  var title = article.querySelector('h1.entry-title, .blog-item-title');
    if (title) title.insertAdjacentElement('afterend', badge);
})();
</script>

How to add this to Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the generated code into the Footer section.
3. Click Save and open any blog post to see the badge.
4. The script automatically detects blog posts and calculates reading time from the post body text.