How to add “Back to all blogs” button to Squarespace blogs

Code

Add the following code to Code Injection (if you only have one blog) or into desired blog Page Settings → Advanced → Single Post Item Code Injection.

Replace Back to all blogs if needed & YOUR_LINK with a link to your blog page.

<script>
/*** Back to all blogs 
* by ospqs.com 
***/

addEventListener("DOMContentLoaded", (event) => {
  const text = `Back to all blogs`; // replace the text, keep quotes
  const link = `YOUR_LINK` // replace the link, keep ticks
  document.querySelector('.blog-item-inner-wrapper').insertAdjacentHTML('afterbegin', `<a href="${link}" class="op-back-all-button"><span class="op-back-all-button-icon" aria-hidden="true">←</span><span class="op-back-all-button-icon-text">${text}</span></a>`);
});
</script>

Styling

You can further style the button with the following classes.

/*** Back to all blogs 
* by ospqs.com 
***/

/* button */
.op-back-all-button {}

/* icon */
.op-back-all-button-icon {}

/* text */
.op-back-all-button-text {}

/*** Back to all blogs end ***/

For example, set up margin at the button itself.

/* button */
.op-back-all-button {
  display: inline-block;
  margin-bottom: 4rem; // bottom spacing
}

If your current font doesn’t have unicode arrows, you can try this font-family for better arrows appearance. And if you arrows doesn’t appear to be centered, position it with some relative positioning:

/* icon */
.op-back-all-button-icon {
    margin-right: 4px;
  	
    position: relative;
    top: 1px; /* arrow top adjustment */
  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto; /* better arrow  */
}